<分区>
<分区>
我正在使用 Twitter Bootstrap 并尝试将比当前文本大的图像旁边的文本垂直居中。
我不能使用 line-height 因为文本超过一行而且我还想允许对文本进行可能的添加；所以我去了 display: table; display: table-cell; 方法，但它仍然拒绝工作。
这是我针对相应部分的 HTML:
<div class="fs">
<div class="container">
<div class="wrapper row">
<div class="icon col-md-2">
<a href="" target="blank">
<img src="fs-icon.jpg" width="170" height="76" alt="Flying Solo Icon">
</a>
</div>
<div class="text col-md-10">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt, lacus sed pharetra luctus, odio purus faucibus nunc, mattis molestie sapien libero sit amet leo.
</span>
</div>
</div>
</div>
<!-- Container Ends -->
</div>
<!-- FS Ends -->
CSS:
#about .fs {
padding: 30px 0;
}
#about .fs .wrapper {
display: table;
}
#about .fs .icon {
display: table-cell;
}
#about .fs .text {
display: table-cell;
min-height: 76px;
vertical-align: middle;
}
... 在 CodePen 上:http://codepen.io/anon/pen/XbdRXE
最佳答案
我认为 CSS 可能与默认 Bootstrap CSS 的行为冲突。但是，您可以完全绕过此方法并尝试将其用作自定义类:
.vertical-center {
display: inline-block;
vertical-align: middle;
float: none;
}
只需将它应用到您的 span 元素即可。
关于css - 无法在 Twitter Bootstrap 中垂直居中图像旁边的文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30220057/