Vertical align a multiple line span text in display: inline-block element

Question

I have a problem with this code, because lorem ipsum isn't in the middle of parent div:

<div style="width: 500px; height: 500px; background-color: #f0f0f0">
    <div style="display: inline-block; width: 100px; height: 100px; background-color: red">
        <a style="vertical-align: middle">lorem ipsum</a>
    </div>
    <div style="display: inline-block; width: 100px; height: 100px; background-color: red">
        <a style="vertical-align: middle">lorem ipsum</a>
    </div>
</div>

I know, I can use table-cell and a lot of other ways, but why a simple code like mine doesn't work? Is there a solution? I need IE8 support and multilines support, position: absolute is not a solution...

Praveen Kumar Purushothaman · Answer 1 · 2015-12-25T18:39:16.813

2

Try giving line-height: 100px instead of vertical-align. You can use this way:

<div style="width: 500px; height: 500px; background-color: #f0f0f0">
  <div style="display: inline-block; width: 100px; height: 100px; background-color: red">
    <a style="line-height: 100px;">lorem ipsum</a>
  </div>
  <div style="display: inline-block; width: 100px; height: 100px; background-color: red">
    <a style="line-height: 100px;">lorem ipsum</a>
  </div>
</div>

Preview

Or the next way is to use the translate, which works only in modern browsers:

<div style="width: 500px; height: 500px; background-color: #f0f0f0">
  <div style="display: inline-block; width: 100px; height: 100px; background-color: red; position: relative;">
    <a style="transform: translate(-50%, -50%); top: 50%; left: 50%; position: absolute;">lorem ipsum</a>
  </div>
  <div style="display: inline-block; width: 100px; height: 100px; background-color: red; position: relative;">
    <a style="transform: translate(-50%, -50%); top: 50%; left: 50%; position: absolute;">lorem ipsum</a>
  </div>
</div>

Preview:

edited Dec 25 '15 at 18:39

answered Dec 25 '15 at 18:34

Praveen Kumar Purushothaman

164,888
24
203
252

I need IE8 support, I can't use it. Line-height doesn't support multiple lines. – Phil Dec 25 '15 at 19:35
@Phil The first one works. Go for it. `:)` – Praveen Kumar Purushothaman Dec 25 '15 at 19:35
https://jsfiddle.net/d1be4mo0/ – Phil Dec 25 '15 at 19:44
@Phil So it works right? What happened? – Praveen Kumar Purushothaman Dec 26 '15 at 14:52

wui · Answer 2 · 2015-12-26T13:10:35.853

this is the fiddle here and working with vertical-align:middle

https://jsfiddle.net/kodedsoft/txgLzycd/

code is

<div style="width: 500px; height: 500px; background-color: #f0f0f0">
    <div style="display: table;vertical-align:middle; width: 100px; height: 100px; background-color: red">
        <a style="display:table-cell;vertical-align: middle">lorem ipsum</a>
    </div>
    <div style="display: table;vertical-align:middle; width: 100px; height: 100px; background-color: red">
        <a style="display:table-cell;vertical-align: middle">lorem ipsum</a>
    </div>
</div>

**update: https://jsfiddle.net/kodedsoft/txgLzycd/3/ **

`I know, I can use table-cell and a lot of other ways` `:P` – Praveen Kumar Purushothaman Dec 25 '15 at 18:56 — Praveen Kumar Purushothaman, Dec 25 '15 at 18:56

score 0 · Answer 3 · answered Dec 25 '15 at 18:58

Vertical-align does not mean what I think you think it means.

In this instance, vertical align refers to the alignment of the element in relation to siblings...not within a parent (unless it's a table or table cell) (or other ancestor).

However, you don't really need it because....

Flexbox can do that:

.parent {
  width: 500px;
  height: 200px;
  background-color: #f0f0f0;
  text-align: center;
  margin: 1em auto;
  border: 1px solid grey;
  display: flex;
  justify-content: center;
  align-items: center;
}
.child {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  background-color: red
}
a {
  text-decoration: none;
}

<div class="parent">
  <div class="child">
    <a href="#">lorem ipsum</a>
  </div>
  <div class="child">
    <a href="#">lorem ipsum</a>
  </div>
</div>

I need IE8 support, I knew this solution.... – Phil Dec 25 '15 at 19:34 — Phil, Dec 25 '15 at 19:34

Vertical align a multiple line span text in display: inline-block element

3 Answers3