Centering text in the middle of the div with height set to 100%

Question

I have structure:

    .itemWrapper{
        position: relative;
        width: 100%;
        display: inline-block;
        height: 20%;
    }
    .itemNumber{
        position: relative;
        float:left;
        height: 100%;
        width: 20%;
    }
    .itemName{
        height: 100%;
        width: 20%;
        position: relative;
        float:left
    }

    <div class = "itemWrapper">
       <div class = "itemNumber">2</div>
       <div class = "itemName"> name </div<
    </div>

I need to center the text inside .itemNumber and .itemName vertically, how can I do that? I know about line-height trick, however the height of the container is in %, what is the way to do it?

score 1 · Answer 1 · answered Apr 23 '19 at 12:59

1

Add display flex and align items:

.itemNumber, .itemName {
    display: flex;
    align-items: center;
}

answered Apr 23 '19 at 12:59

Roberto Zvjerković

9,657
4
26
47

but usin this, i wont be able to horizontally align the text, or am i wrong? – Johnyb Apr 23 '19 at 13:30
Just add `justify-content: center;` – Roberto Zvjerković Apr 23 '19 at 13:33

score 1 · Answer 2 · answered Apr 23 '19 at 13:02

1

You can achieve this using Flex:

.itemWrapper{
    height: 500px;
    width: 100%;
    display: flex;
    background-color: silver;
}
.itemNumber{
    width: 20%;
    align-self: center;
}
.itemName{
   width: 20%;
   align-self: center;
}

answered Apr 23 '19 at 13:02

Thanveer Shah

3,250
2
15
31

This will lose the height of text wrapper elements. – Roberto Zvjerković Apr 23 '19 at 13:09

score 0 · Answer 3 · answered Apr 23 '19 at 13:06

0

Add the following css code

.itemNumber, .itemName {
          display: flex;
          align-items: center;
          justify-content: center
 }

answered Apr 23 '19 at 13:06

Atchutha rama reddy Karri

1,434
13
16

Centering text in the middle of the div with height set to 100%

3 Answers3