Question

这是我的html元素的样子（错误）。我需要将文本在中间垂直对齐：

enter image description here

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

.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; display：inline-block; zoom：1; *显示：内联;只是一种启用跨浏览器内联块的方法：

“zoom：1; * display：inline;” - 适用于旧的IE（如IE 7） display：-moz-inline-stack - 适用于旧的mozilla firefox。如果您不想使用它（尽管没有理由避免使用它），您可以使用display：inline代替子节点。

在这种情况下，浮动和表格的所有解决方案似乎都过于复杂和有问题。尝试编写简单的代码。

您不需要在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>

Answer 2

尝试将display: table用于您的父容器，并display: table-cell用于您的子容器。

这样的事情：

.favText {
    display: table;
    vertical-align: middle;
    line-height: 150%;
    height: 100%;
    width:110px;
    float:right;
}

.inner {
    display: table-cell;
    vertical-align: middle;
}

Answer 3

试试这个（ Working JSFiddle Demo ）：

.favorite {
    float: left;
    width: 200px;
    font-size:14px;
    height:75px;
}
.favImg {
    margin-right:15px;
    float:left;
    width:75px;
    height: 75px;
    background: #ff0000;
}
.favText {
    display: table;
    vertical-align: middle;
    line-height: 150%;
    height: 100%;
    width:110px;
    float:right;
}

.inner {
    display: table-cell;
    vertical-align: middle;
}
 <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">
           <div class="inner">Playing a sport alot and more</div>
      </div>
 </div>

基本上，添加.inner div以将文本包装在.favText内，生成.favText display: table和height: 100%，然后提供.inner } div display: table-cell和vertical-align: middle。

当垂直居中的地方涉及未知高度时，这是一种非常快速和简单的方法，即使你不知道容器元素或内容元素的高度也会有效。

如果您的文字总是一行，您可以在原始代码的line-height: 75px div上设置.favText，然后将其留在那里（但如果文字换行，则不是选项）。

Answer 4

只需将margin-top: 13.75px;添加到favText。

JSFiddle

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

4 个答案: