Vertical-align Doesn't Work In Inline-block

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

Solution 1:

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 */
}