我试图让这个 div 表/列/行中的文本与每个句子对应的图像居中对齐。但到目前为止，它给我的更多是一种顶部对齐的感觉。谁能帮我解决这个问题？
CSS:
.div-table {
display:table;
width:776px;
height: auto;
background-color:#eee;
border:1px solid #666666;
border-spacing:5px;
/*cellspacing:poor IE support for this*/
clear: both;
}
#image-middle {
vertical-align: middle;
float: left;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
}
.div-table-row {
display:table-row;
width: 776px;
float: left;
clear: both;
}
.div-table-col-first {
display:table-column;
width:49%;
float: left;
}
HTML:
<div class="div-table">
<div class="div-table-row">
<div class="div-table-col-first">
<img width="50" height="50" id="image-middle">First Image Text in the first column and sentence</div>
<div class="div-table-col-first">Second Column Headline
<br />
<img alt="Checkbox" width="30" height="30" id="image-middle">First Image Second Column Text
<br />
<br />
<img id="image-middle" alt="Padlock in a circle">Second Image Second Column Text</div>
</div>
<div class="div-table-row">
<div class="div-table-col-first">
<img width="50" height="78" id="image-middle">Second Image Text in the first column and sentence</div>
<div class="div-table-col-first">
<img id="image-middle" alt="Pie Chart">Third Image Second Column Text
<br />
<br />
<img id="image-middle" alt="A Cover for a Safe">Fourth Image First column Text</div>
</div>
</div>
下面是由上述标记生成的 JSFiddle。
最佳答案
首先，将图像和文本分开包装 (http://jsfiddle.net/L9FnJ/) 这是为了让您开始，我不会清理您的所有代码或完成所有工作，但这应该会告诉您如何做.:
<body>
<div class="div-table">
<div class="div-table-row">
<div class="div-table-col-first">
<div class="colImg"><img width="50" height="50" id="image-middle" /></div><div class="colText">First Image Text in the first column and sentence</div>
</div>
<div class="div-table-col-first">Second Column Headline<br />
<img alt="Checkbox" width="30" height="30" id="image-middle">First Image Second Column Text<br />
<br />
<img id="image-middle" alt="Padlock in a circle"> Second Image Second Column Text </div>
</div>
<div class="div-table-row">
<div class="div-table-col-first"><img width="50" height="78" id="image-middle">Second Image Text in the first column and sentence</div>
<div class="div-table-col-first"><img id="image-middle" alt="Pie Chart">
Third Image Second Column Text<br />
<br />
<img id="image-middle" alt="A Cover for a Safe"> Fourth Image First column Text</div>
</div>
</div>
</body>
</html>
然后，在您的 CSS 中添加:
.colImg, .colText {
display: table-cell;
vertical-align: middle;
}
关于html - 使用 Div 的文本对齐问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24618746/