如何在任何条件下保持文本垂直对齐？

Question

例如，在下图中，我希望文本始终在所有条件下垂直对齐。即使文本是一行，两行或三行。

表示文本应始终垂直居中。我不想添加额外的span

<div>
<img src=abc.jpg"> Hello Stackoverflow. Thank you for help me
</div>

我想用这个html实现。

修改

而且我不想为任何元素提供固定宽度和高度

Answer 1

Chris Coyier写了一篇很好的教程：http://css-tricks.com/vertically-center-multi-lined-text/

我自己用过它，效果很好。

Answer 2

尝试

HTML

<div>
    <img src="" height="155px" width="155px" style="float:left">
    <div class="imageText">Hiiii <br/> how r u? <br/> use multiple lines</div>
</div>

CSS

.imageText {  
    display: table-cell; // this says treat this element like a table cell
    vertical-align:middle;
    border:1px solid red;
    height:150px;
    width:150px;
    text-align:left;   
}

DEMO

注意：width和height事项

Answer 3

我非常喜欢@ http://reisio.com/examples/vertcenter/

所描述的方法