在 Bootstrap 的栅格系统中如何将文字垂直居中？
代码：
......
<div class="row text-center outer">
<div class="col-sm-4">
<img src="photo.jpg" alt="..." class="img-circle">
</div>
<div class="col-sm-8 text-left inner">
<p>测试文字</p>
</div>
</div>
......
尝试用过了
vertical-align: middle
，但不管是加在
<div class="col-sm-8">
上还是
<p>
上都没有用。
也在 Segmentfault 上和其他地方找过了一些方法，但都有些问题。
于是尝试用 jQuery 与 CSS：
$(document).ready(function() {
$(window).resize(function() {
$('.inner').css({
margin-left: ($(window).width() - $('.inner').outerWidth()) / 2,
margin-top: ($(window).height() - $('.inner').outerHeight()) / 2
});
});
$(window).resize();
});
.inner {
position: absolute;
left: 50%;
top: 50%;
}
.outer {
position: relative;
}
结果虽然文字垂直居中了，但是又出现了新的问题：
整个页面右边出现了一条白边，用开发者工具看的时候发现这条白边在
<html>
外面（？）
请问如何才能在不影响页面布局等的情况下将栅格中的文字垂直居中？非常感谢。
谁盯谁怀孕
10 years, 5 months ago
Answers
首先声明，这个方案不能在 IE 6/7 下工作，其他浏览器理论上都可以正常工作，所以可能并不是题主需要的完美方案。
不能居中的罪魁祸首是
col-sm-*
的
float: left
样式，因为对于
col-sm-*
而言，只要屏幕宽度不小于
@screen-sm-min
就不会折行，所以可以考虑不使用
float: left
而是用
display: table-cell
来实现对齐，这样就能比较好的解决居中问题了。不过问题是不支持这种
display
的浏览器就会出问题，你可以考虑用 CSS hack 来 fallback，舍弃居中对齐来保持栅格系统正常工作。
HTML：
<div class="row text-center vertical-middle-sm">
<div class="col-sm-4">
<img src="photo.jpg" alt="..." class="img-circle">
</div>
<div class="col-sm-8 text-left">
<p>测试文字</p>
</div>
</div>
LESS：
@media (min-width: @screen-sm-min) {
.vertical-middle-sm {
display: table;
> div {
display: table-cell;
height: 100%;
min-height: 100%;
float: none !important;
}
}
}
白井黑子
answered 10 years, 5 months ago
