我有一个表格,我需要所有内容都居中对齐,并且在一个 td 中我有一个图像,图像后有跨度。 我需要 tr td 中的所有图像都垂直对齐,所以我对它们应用 float left 但我松开了对齐中心。有什么解决方案?
<body>
<table class="table table-striped">
<tr>
<td>
<img src="http://placehold.it/50x20" alt="">
<span>short text</span>
</td>
<td>some text</td>
<td>some text</td>
<td>some text</td>
</tr>
<tr>
<td>
<img src="http://placehold.it/50x20" alt="">
<span>longer text text</span>
</td>
<td>some text</td>
<td>some text</td>
<td>some text</td>
</tr>
</table>
</body>
.table tr td {
text-align: center;
}
.table tr td:first-child span, .table tr td:first-child img {
float:left;
}
.table tr td:first-child img {
margin-right: 5px;
}
笨蛋: http://plnkr.co/edit/D4VbnesF3FnwnNHI25nB?p=preview
我需要图像与所有其他图像对齐,还有跨度。
最佳答案
如果你想让它水平和垂直居中,你必须删除 float 并放置一个 vertical-align:middle
像这样:
<td style="text-align:center;vertical-align:middle;">
<img src="" style="display:inline-block;" />
</td>
当然你也可以使用类...
关于html - Css 与两个 float 元素对齐到中心 td,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27901213/