2

I'd like to center text vertically.

But, this doesn't work.

I should be able to center text vertically when I place text in inline-block, right?

How come this code doesn't work and how can I make it work!?

Please help me out!

Thank you in advance :)

HTML

<ul class="socialBlock">
            <li class="socialBlock__item">tw</li>
            <li class="socialBlock__item">fb</li>
            <li class="socialBlock__item">g+</li>

</ul>

CSS

.socialBlock {
padding:10px;
background: yellow;
list-style: none;
}

.socialBlock__item {
margin:0;
padding:0;
display: inline-block;
background: green;
height:44px;
vertical-align: middle;
}

Codeopen

http://codepen.io/anon/pen/DihFw

W3Q
  • 909
  • 1
  • 11
  • 19
  • It is not that easy. Look at this http://www.w3.org/Style/Examples/007/center.en.html. – loveNoHate Aug 23 '14 at 07:55
  • Using a `line-height: 44px;` for `.socialBlock__item` will do the trick. In fact, `vertical-align: middle;` affects the inline element itself, not its text contents. – Hashem Qolami Aug 23 '14 at 08:02

1 Answers1

3

The trick with vertically aligning inline elements is to have a larger, inline element to align them with. What I find works a lot easier is to use display table and display table-cell (often table-cell is enough, but you may need to use display table on the parent element depending on what you're trying to achieve:

.socialBlock_item {
    margin: 0;
    padding: 0;
    display: table-cell;
    background: green;
    height: 44px;
    vertical-align: middle /* you still want to use this as well */
}
kinakuta
  • 9,029
  • 1
  • 39
  • 48
  • Yeah, I think I had better use "display:table". Thank! But I still don't understand why I can't place text in the middle of inline-block. – W3Q Aug 23 '14 at 08:11
  • 1
    @W3Q In this particular case you could use `line-height: 44px;` instead. However if you're curious about this issue, take a look at my [explanation here](http://stackoverflow.com/questions/25419552/how-to-align-a-label-to-the-bottom-of-a-div-in-css/25419852#25419852). – Hashem Qolami Aug 23 '14 at 08:13