4

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>
Community
  • 1
  • 1
Revious
  • 6,994
  • 29
  • 89
  • 133
  • a browser reads pixels from top left to bottom right, so it can't really vertically center something because the pixels that will be above the text are calculated before the text itself, if that makes sense.. I don't know if this will help you. – Goos van den Bekerom Oct 02 '14 at 09:46
  • @Goosebumbs: I'm not sure to have understood. I've understood that for efficiency reasons, the browser use an algorithm which calculates the height over the text before calculating the height of the div itself and the height of the text.. and thus leads to a systematic error which complicates the life of the developers.. – Revious Oct 02 '14 at 09:58
  • 3
    `vertical-align` is not meant for text layout. It is meant for vertically aligning elements to their parent. So it's counter intuitive because you are expecting it to do something it's not designed to do. Like if I expected `color` rule to set the background color of a div instead of setting text color within div. http://phrogz.net/css/vertical-align/index.html – Anthony Oct 02 '14 at 10:00
  • @Anthony: ok, but if I "vertically aligning" my text "element to their parent" why my text element doesn't get aligned? can you convert your comment to an answer? I will edit it and accept! – Revious Oct 02 '14 at 10:03
  • 2
    Because 1) the rule is applied to the element (like a div) not to the text inside the div. The div is the child, not the parent, 2) text isn't an element, so vertical-align isnt applied to it. Because you are thinking of rules applying to content, you get messed up. Some rules apply to content, most apply to the selected element. It's important to keep a clear idea on which rules are for typography and which are for layout, especially when the rule name is unclear. – Anthony Oct 02 '14 at 10:09
  • @Anthony: thanks, the link you provided is also really good. Is it correct to summarize that the real vertical alignment of children elements is available only for display:table-cell, otherwise I have to use top:50%? – Revious Oct 02 '14 at 10:14
  • 1
    Explanations of the vertical-align property on the web are almost universally wretched. Almost, but not quite. This description by Christopher Aue does explain things properly, and I encourage you to read it carefully: http://christopheraue.net/2014/03/05/vertical-align/. (Thanks to [Bruce Lawson](http://www.brucelawson.co.uk/#post-7647) for pointing to this article.) – Alohci Oct 02 '14 at 10:19
  • So now it's very clear that Vertical Align can be used for 2 things. One is very well specified by this article http://christopheraue.net/2014/03/05/vertical-align/ and regards span elements.. But there is also the behavior with display:table-cell which is the one I wanted.. CSS don't provide that kind of alignment? :O No one made a workaround? – Revious Oct 02 '14 at 10:31
  • `display:table-cell; vertical-align:middle;` – Anthony Oct 02 '14 at 10:58
  • @Anthony: I've tried it here: http://stackoverflow.com/questions/26159267/css-table-cell-size-conterintuitive-behaviour – Revious Oct 02 '14 at 10:59
  • 1
    @Revious - There are at least three other ways to vertically align content in its container: absolute positioning, transforms and flexbox. All are covered copiously in StackOverflow answers. – Alohci Oct 02 '14 at 12:21

1 Answers1

-2

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:

  • vertical-align in table cells
  • vertical-align on inline elements

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.

Revious
  • 6,994
  • 29
  • 89
  • 133