在图像旁边划线文本，垂直居中

Question

<img style="float: left;" width=200 height=200 src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTQOrSSvhefLVAXo3OOoMGYGS232bfHFnZyA9Jk24KeefYuau8c">
    <div id="t">text next to it which will be line broken!</div>

#t
{
    float: left;
    line-height: 200px;
    background-color: red;
}

http://jsfiddle.net/s4wMF/

好吧......正如你所看到的，收缩宽度会导致文字下划线。我希望实现这样的目标：

Answer 1

摆脱行高。这将导致它如你所描述的那样环绕。

尝试

img { display: block; }
#t { vertical-align: middle; }

vertical-align还有其他选项，请使用最适合您的选项。

Answer 2

如果您希望在div的中心垂直对齐文本，最好在此处使用table-cell方法而不是line-height。

<div id="t"><p>text next to it which will be line broken!<p></div>

尝试这样的事情

#t
{
    float: left;
    background-color: red;
    width:100px;
    height:200px;
    display: table;
}

#t p {
    display:table-cell;
    vertical-align: middle
}