Table 单元格图像和文本对齐

Question

我有一个三列布局，有时我希望一列中的文本与另一列中的图像相邻。我的问题是，当我将图像插入其中一列时，相邻列中的文本将自身定位在相邻列中图像的底部附近，而不是像人们期望的那样位于列的顶部。

我的基本结构：

<div class="fwcol">
    <div class="col">
        <div class="ttl">
        <img src="images/placeholder.png" width="571" height="540">
        <p>Bla Bla Bla </p>
        </div><!--ttl-->
        <div class="otr">Column 2 Content
        </div><!--otr-->
    </div><!--col-->
</div><!--fwcol-->

CSS:

.fwcol {
    float: left;
    width: 966px;
}        
.ttl {
    display: table-cell;
    padding: 20px;
    width: 571px;
    background: #FFF;
}
.col {
    width: 966px;
    display: table;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 20px;
}

Answer 1

这样做是因为 .ttl 的 display 设置为 table-cell。您可以将 vertical-align: top 添加到元素以更正此行为：

.ttl {
    display: table-cell;
    vertical-align: top;
    padding:20px;
    width: 571px;
    background: #FFF;
}

Answer 2

您没有对应用 table-cell:

的 div 使用垂直对齐

.ttl {
    display: table-cell;
    vertical-align: top;
    padding: 20px;
    width: 571px;
    background: #FFF;
}

此外，在图像本身中，您需要使用垂直对齐：

.ttl img {
    display: inline-block;
    vertical-align: top;
}

Table 单元格图像和文本对齐

Table Cell image and text alignment

html

css

tablecell