CSS vertical centering a text. Why is it so counterintuitive?
Let's start from this answer: Is it possible to vertically align text within a div?
There is a CSS property which is called vertical-align and another which is called line-height I would expect that if I put a text inside an element (div, span, p) and this element has set the property vertical-align: middle the height of the rendered text will be calculated, the height of the rendered container element as well and the text will be centered vertically inside the container element.
But according to the answer it seems not to work this way:
that is due to line-height. If you add height to an element where exactly does the text inside of it lie? That is, if you have a block of text that is font-size: 10px (a theoretical height:10px) inside a container that is 60px where exactly is the text going to end up? Most surely at the top of the container, because the text can only position itself where the text flows, inside a height:10px space
I don't understand this. The line height should affect the distance between two lines. It should work like a kind of margin-top applied to each letter of the text. Intuitively I would expect that the vertical align is stronger than a 'margin'.
How should I think to understand why the behavior of vertical align is not vertical aligning the elements as expected? Why this choice by the CSS creators?
#column-content {
display: inline-block;
border: 1px solid red;
position: relative;
}
#column-content strong {
color: #592102;
font-size: 18px;
}
img {
margin-top: -7px;
vertical-align: middle;
}
span {
display: inline-block;
vertical-align: middle
}<div id="column-content">
<img src="http://i.imgur.com/WxW4B.png">
<span><strong>1234</strong>
yet another text content that should be centered vertically</span>
</div>I have to thank Anthony and Alohci for their comment. I would have accepted them if they would have been answers.
The cited links give a very good explanation of the reason why vertical-align seem not to work as expected:
In short the reason is that vertical-align has two different behavior:
In all the other elements it's completely ignored.
As suggested by Alohci there are at least three other ways to vertically align content in its container: absolute positioning, transforms and flexbox.
链接地址: http://www.djcxy.com/p/75834.html上一篇: 中心Div与纵横比