How to vertically align text in div which in an inline-block div?

Question

Pls see the code:

http://jsfiddle.net/hrhktkbzyy/0kwnL8k8/

<div>        
    <div class="container divinline">
    <div class="row1 ">ROW ONE</div>
    <div class="row2">ROW TWO</div>
</div>

CSS

.divinline{
    display:inline-block;
}

.container{
    line-height:60px;
    height:60px;
    background:#ffee12;
    width:50%;
    text-align:left;
}

.row1{
    background:#450011;
    font-size:12px;
    height:50%;
    line-height:50%;
}

.row2{
    background:#333333;
    font-size:12px;
    height:50%;
    line-height:50%;
    color:#FFF;
}

I don't know why the text in row1 and row2 overlapped the border of the two divs. I want to vertical-align them to the bottom. Anybody know the reason?

Many thanx.

I would not recommend that you do `50%` height because you really do not need it to be responsive when it is that small and only have a few items. I would however suggest to use `
` instead of what you have and give the `[class of ul] li` a `line-height` — JGallardo, Sep 15 '14 at 18:00

score 2 · Accepted Answer · answered Sep 15 '14 at 17:04

Why not just halve your height / line-height in .container and remove the height:50%; and line-height:50%; from .row1 and .row2.

So your container class would be:

.container{
    line-height:30px; //half previous value
    height:30px; //half previous value
    background:#ffee12;
    width:50%;
    text-align:left;
}

And remove 50% height from row1 and row2

.row1{
    background:#450011;
    font-size:12px;
}

.row2{
    background:#333333;
    font-size:12px;
    color:#FFF;
}

JS Fiddle Demo

score 2 · Answer 2 · edited Sep 15 '14 at 19:25

2

Similar to Dan's answer - http://jsfiddle.net/0kwnL8k8/4/ but I added another 'row' class for use in all rows. This does assume that the height is constant 30px.

.row {
  line-height:30px;
  height:50%;
  font-size:12px;
}

edited Sep 15 '14 at 19:25

Dan

9,391
5
41
73

answered Sep 15 '14 at 17:33

JMWhittaker

3,633
3
23
30

score 1 · Answer 3 · edited May 23 '17 at 10:26

1

I just answered a similar question : How to vertically align text in the middle of a div that has a percentage height?

In your case it could be : http://jsfiddle.net/0kwnL8k8/5/

.row1:before, .row2:after {
    content:'';
    height:100%;
    vertical-align:middle;
    display:inline-block;
}

See answer linked here on SO, to manage multilines if that happens

edited May 23 '17 at 10:26

Community

1
1

answered Sep 15 '14 at 18:15

G-Cyrillus

101,410
14
105
129

How to vertically align text in div which in an inline-block div?

3 Answers3