How to vertically center text in an elment block with font resizing?
My usual approach for vertically centering text is to use a line-height equal to the container's height.
So the container has
height: 60px;
line-height: 60px;
and the children have
line-height: 60px;
It works. But if you increase font-size
above 1em it will mess it up. Worse, browsers are inconsistent in how they do it!
Here is a JSFiddle daemon: http://jsfiddle.net/tgv2rx7f/7/ . Note that Firefox has a big "A." too close to the top of the container. The demo isn't too bad, but on my actual site it is very noticeable and distracting. If you fix it in Firefox then it is too low in Chrome.
I cannot get this to work consistently no matter what I do. I was playing with different values vertical-align
, top
, text-top
, middle
... no dice. I can get it to work if I change the container to display:inline
, but in my layout it should be block
or inline-block
.
PS, I cannot use flex box.
Edit : This is what I see, both in my actual webpage (blue) and in the JSFiddle (green).
Chrome:
Firefox:
Edit 2 . Thanks andyb
for indicating that using em
will resize the container from px
. This also helped to reveal another complication, namely that browsers handle font sizes and heights differently, but that is outside the scope of this question, so I created a new question on this topic ( here ) and marked the andyb
answer as accepted.
source to share
In blocks, container
and b
line-height
and font-size
cause the block height to change. line-height
and font-size
interact with each other! line-height
is the vertical distance between lines of text in the container. Thus, for line-height:60px
and, the font-size:2.5em
height of the container grows to 73 pixels. This occurs in CSS by being rigid height:60px
in the container, but what it does not affect the original text. Text "1." the container will move up or down if the baseline changes. If the font size does not .a
increase, the baseline falls as you drag text "1". down. You can check this by rotating all vertical alignment and increasing the font size.a
and "1." content moves down. With this in mind, we really only need to fix the vertical alignment of the container, for example:
.container {
display: block;
overflow: hidden;
height: 60px;
line-height: 60px;
vertical-align: top;
font-size: 2.5em;
width: 100%;
text-align: center;
background-color: lightgreen;
text-decoration: none;
}
.a {
font-size: 2em;
}
<a href="#" class="container">
1.<span class="a">A.</span><span class="b">b b b b b b b</span>
</a>
But the baseline is still where the bottom is A
, since it A
is the last container in normal flow, see
And as long as the font size is .b
smaller .a
, the baseline will remain at .a
, see the following image with a small font size at .b
:
Note, however, that the container has .b
inherited line-height:60px
- see why this inline-block element has content that is not vertically aligned , so the height is correct and we can vertical-align
.b
at the top of the container, which has the same height and therefore causes the text to be aligned, for example :
.container {
display: block;
overflow: hidden;
height: 60px;
line-height: 60px;
vertical-align: top;
font-size: 2.5em;
width: 100%;
text-align: center;
background-color: lightgreen;
text-decoration: none;
}
.a {
font-size: 2em;
}
.b {
display: inline-block;
font-size: 23px;
vertical-align: top;
font-family: sans-serif;
text-align: center;
}
<a href="#" class="container">
1.<span class="a">A.</span><span class="b">b b b b b b b</span>
</a>
source to share