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

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...

Answer 1

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: