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>