Question

I’m trying to center a div vertically in a parent div, where text is present. Here’s what I’ve got:

It looks a little funny because the text seems to be centered properly, but the yellow boxes aren’t. This is how I’m doing it:

.btn {
      background-color: #ccc;
      color: #000;
      width: 200px;
      border: solid 1px black;
      text-align: center;
      vertical-align: middle;
      display: table-cell;
}
.square {
      background-color: #ff0;
      width: 20px;
      height: 20px;
      display: inline-block;
}
.inner {
      display: inline-block;
}

<div class="btn">
  <div class="square"></div>
  <div class="inner">Hello</div>
  <div class="square"></div>
</div>

Should my usage of “table-cell” + vertical-align be working? I only care about html5, I’m really just targeting the latest versions of mobile safari, so don’t have to worry about older browsers etc.

Here’s a js fiddle of this:

http://jsfiddle.net/TrJqF/

Thanks

Answer 1

Set vertical-align:top on the square class. The extra space comes from space reserved for descendant text elements like j, g, y etc. that drop below the line.

jsFiddle example