0

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;
Piotr Ruszkiewicz
  • 57
  • 8
  • 2
    Welcome to Stack Overflow!, Please [take the tour](http://stackoverflow.com/tour), and read [how to ask](https://stackoverflow.com/help/how-to-ask), an [On Topic question](https://stackoverflow.com/help/on-topic), then look at the [Question Check list](https://meta.stackoverflow.com/questions/260648/stack-overflow-question-checklist), the [perfect question](http://codeblog.jonskeet.uk/2010/08/29/writing-the-perfect-question/) and how to create a [Minimal, Complete and Verifiable Example](http://stackoverflow.com/help/mcve) – disinfor Nov 11 '22 at 16:17
  • 1
    The flex properties like justify content and align items has to be on div not h2. Placing on h2 will make the items inside it to be aligned. – vishnu sandhireddy Nov 11 '22 at 16:18

4 Answers4

0

The div should have:

div {
  display:flex;
  align-items: center;
}
leesharon
  • 41
  • 4
0

There are several problems:

  1. The h2 element is not in a flex container (you have to set display: flex on the parent div)
  2. The properties justify-content and align-content have to be set on the flex container, not the flex item.
  3. For centering a flex item vertically in a flex container with flex-direction: row, you have to use align-items rather than align-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>
majusebetter
  • 1,458
  • 1
  • 4
  • 13
0

The best approach to make the Children Div vertically Centered, is to make the display of the Mother div Flex, not the Children div.

div {
    display: inline-flex;
    background-color: green;    
    width: 130px;
    height: 45px;
    margin-top: 20px;
    justify-content: center;
    align-items: center;
    
}
h2 {
    font-size: 20px;
    font-weight: 100;
    margin: 0;
}
<div>
    <h2>hello</h2>
</div>
Argha Shipan Sarker
  • 135
  • 1
  • 8
0

I agree 100% with the answers display flex on container not child.

Even if I'm always using flex, and css grid, I would like to add another solution "old fashion" way based on line-height:

        div {
            display: inline-block;
            background-color: green;
            width: 130px;
            margin-top: 20px;
            line-height: 45px;
            vertical-align: middle;
            text-align: center;
        }
        h2 {
            font-size: 20px;
            font-weight: 100;
            line-height: 45px;
        }
pier farrugia
  • 1,520
  • 2
  • 2
  • 9