如何用csss垂直对齐中间

Question

i want a vertically align middle div

text and image are not align

html

<div id="wrapper">
<span>    text </span><img src="read-mor-but.png" />
</div>

css:

#wrapper {
    background: blue;
    height: 100px;
    text-align: center;
    display:table-cell;
    vertical-align:middle;
}

Answer 1

You also need to add vertical-align:middle to img tag

#wrapper img{
    vertical-align:middle;
}

Fiddle Demo

Answer 2

try to add line-height:100px too along with your code LINK

css:

#wrapper {
    background: blue;
    height: 100px;
    text-align: center;
    display:table-cell;
    vertical-align:middle;
    line-height:100px;
}