html - 在div中获取以图像为中心的多行文本

Question

这是我的 html 元素的样子(不正确)。我需要文本在中间垂直对齐:

文本没有换行符，它只是根据 div 的大小环绕。封闭的 div 为 200px，图像为 75px，图像的右边距为 15px，文本显示为 110px。

.favorite {
    float: left;
    width: 200px;
    font-size:14px;
    height:75px;
}
.favImg {
    margin-right:15px;
    float:left;
    width:75px;
}

.favText {
    display: inline-block;
    vertical-align: middle;
    line-height: 150%;

    width:110px;
    float:right;
}

            <div class="favorite">
                <div class="favImg"><img src="http://localhost/images/icons/favorites-tennis.jpg" width="75" height="75" border="0" alt="Tennis"/></div>
                <div class="favText">Playing a sport alot and more</div>
            </div>

Answer 1

太多无用的 CSS。它可以做得更简单:

.favorite {
width: 200px;
font-size:14px;
height:75px;
white-space:nowrap;
}

.favImg, .favText{
display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline;
vertical-align:middle;
}

.favImg {
margin-right:15px;
width:75px;
height: 75px;
background: #ff0000;
}

.favText {
line-height: 150%;
width:110px;
white-space:normal;
}

行显示:-moz-inline-stack；显示:内联 block ；缩放:1； *显示:内联；只是一种启用跨浏览器内联 block 的方法:

“缩放:1；*显示:内联；” - 适用于旧的 IE(如 IE 7)显示:-moz-inline-stack - 适用于旧版 mozilla firefox。如果您不想使用它(虽然没有理由避免它)，您可以只对子节点使用 display:inline 。

在这种情况下，所有带有 float 和表格的解决方案似乎都异常复杂且有问题。尝试编写简单的代码。

您也不需要将每个元素都包装在一个 div 中:

<div class="favorite">
<img src="http://localhost/images/icons/favorites-tennis.jpg" class="favImg" alt="Tennis"/><p class="favText">Playing a sport alot and more</p>
</div>