2

这是我的 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>
4

4 回答 4

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；显示：内联块；缩放：1；*显示：内联；只是一种启用跨浏览器内联块的方法：

“缩放：1；*显示：内联；” - 适用于旧的 IE（如 IE 7）显示：-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>
于 2013-10-04T15:53:34.023 回答
0

只需添加一个margin-top: 13.75px;到favText.

JSF中。

于 2013-10-04T15:56:08.847 回答
0

试试这个（工作 JSFiddle 演示）：

.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>

基本上，添加一个.innerdiv 将文本包裹在.favText、 make.favText display: table和height: 100%中，然后给.innerdivdisplay: table-cell和vertical-align: middle.

当垂直居中涉及未知高度的事物时，这是一种非常快速且简单的方法，即使您不知道容器元素或内容元素的高度也可以使用。

如果你的文本总是一行，你可以在你的原始代码中设置line-height: 75px你的.favTextdiv 并保留它（但如果文本换行，这不是一个选项）。

于 2013-10-04T15:45:15.937 回答
0

尝试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;
}
于 2013-10-04T15:43:07.313 回答