如何在任何情况下保持文本垂直对齐？答案

【问题标题】：How to keep the text vertically aligned in any condition?如何在任何情况下保持文本垂直对齐？
【发布时间】：2011-04-21 03:19:46
【问题描述】：

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

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

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

我想用这个html来实现。

编辑

我不想给任何元素固定宽度和高度

【问题讨论】：

标签： html css xhtml

【解决方案1】：

Chris Coyier 就此写了一篇出色的教程：http://css-tricks.com/vertically-center-multi-lined-text/

我自己用过，效果很好。

【讨论】：

【解决方案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 很重要

【讨论】：

但我不能给出固定的宽度和高度

【解决方案3】：

我很喜欢@http://reisio.com/examples/vertcenter/描述的方法

【讨论】：