Issue
I've got a problem with centering in another tag . I have no problem with horizontal align in a flexox or in a old fashion way but vertical is still a problem for me.
div {
display: inline-block;
background-color: green;
width: 130px;
height: 45px;
margin-top: 20px;
text-align: center;
}
h2 {
font-size: 20px;
font-weight: 100;
display: flex;
justify-content: center;
align-content: center;
Solution
There are several problems:
- The
h2
element is not in a flex container (you have to setdisplay: flex
on the parentdiv
) - The properties
justify-content
andalign-content
have to be set on the flex container, not the flex item. - For centering a flex item vertically in a flex container with
flex-direction: row
, you have to usealign-items
rather thanalign-content
div {
display: flex;
justify-content: center;
align-items: center;
width: 130px;
height: 45px;
margin-top: 20px;
text-align: center;
background-color: green;
}
h2 {
font-size: 20px;
font-weight: 100;
}
<div>
<h2>Headline 2</h2>
</div>
Answered By - majusebetter
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.