2

我有以下html....

<div>
    <img src="" /> 
    <span>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
    </span>
</div>

和CSS....

img{
    width: 50px;
    height: 50px;
    background-color: red;
    display: inline-block;
    float: left;
    vertical-align: middle; /* not worked.... */
}
span{
    overflow: hidden;
    display: block;
    padding-left: 10px;
}

演示

正如您在演示中看到的那样，我想要与文本垂直对齐的红色框。我还可以给出 div 的高度，例如 400px。

4

3 回答 3

3

如果我要这样做，我会使用表格显示（适用于所有现代浏览器）。

首先，更改您的标记以将您的标记包含img在span它自己的中（这将充当我们的表格单元格）：

...
<span>
    <img />
</span>
<span>
    ...
</span>

然后应用以下样式：

div {
    display:table;
}

span {
    display:table-cell;
    vertical-align:middle;
    padding-left:10px;
}

span:first-child {
    padding-left:0;
}

img {
    width:50px;
    height:50px;
    background:#f00;
}

JSFiddle 演示。

于 2013-10-21T10:41:22.673 回答
1

您还可以使用以下 CSS 使用红色方形图案的绝对定位来获得类似的结果：

div {
    border: 1px dotted blue;
    position: relative;
    min-height: 50px;
}
img{
    width: 50px;
    height: 50px;
    background-color: red;
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -25px;
}
span{
    display: block;
    margin-left: 60px;
}

在父容器上设置position: relative，然后使用绝对定位img从顶部放置 50%，然后应用margin-top: -25px以使其相对于父容器的高度垂直对齐。

您需要在 上设置文本，以便为方形图案留出空间margin-left: 60px。span

一个优点是设计不依赖display: table-cell.

一个缺点是对于高度小于 50px 的文本块，文本会对齐到正方形的顶部边缘，这可能会根据设计要求不合适。

参见演示：http: //jsfiddle.net/audetwebdesign/796us/

脚注：我个人认为display: table-cell，只要浏览器支持，它是一个更健壮的解决方案。如果table-cell不支持，则设计将优雅地降级为与文本块顶部边缘对齐的主题，这与绝对定位选项对短文本块的限制相当。

于 2013-10-21T11:13:28.053 回答
0

vertical-align属性只允许用于table元素或显示的元素，table-cell如 James Donelly 在他的回答中提到的那样，但作为替代方案，您可以使用：

margin-top: 50%;见例子：http: //jsfiddle.net/KGg6H/19/

于 2013-10-21T10:45:07.407 回答