html - 文本与图像垂直居中

Question

我有这段代码，文本正确居中。

HTML

<div class="holder">
    <img src="http://placehold.it/100x150/" style="float: left;" />
    <a href="#" class="centered"> some text</a>
</div>

CSS

.holder {
    border: 1px solid red;
    padding: 10px;
    width: 300px;
    display: table;
}
a {
    display: table-cell;
    vertical-align: middle;
}
img {
    width: 100px;
}

http://jsfiddle.net/2P8Yj/1/

我怎样才能使文本左对齐，在图像旁边？

Answer 1

给你的 a 添加宽度:

a {
    display: table-cell;
    vertical-align: middle;
    width:200px;
}

DEMO HERE