bootstrap栅栏剧中_在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>
外⾯(？)
请问如何才能在不影响页⾯布局等的情况下将栅格中的⽂字垂直居中？⾮常感谢。
⾸先声明，这个⽅案不能在 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;
}
}
}
<div class="cont">
<div class="inner">⽐较满意⽐较满意⽐较满意</div><div class="v">cssHack</div> </div>
* {
margin: 0;
padding: 0;
}
.cont {
background-color: #ccc;
font-size: 24px;
height: 150px;
text-align: center;
overflow: hidden;
width: 280px;
}
.cont .inner,
.cont .v {
display: inline-block;
css设置文字垂直居中zoom: 1;*display: inline; /* ⽤于触发⽀持IE67 inline-block */
}
.
cont .inner {
line-height: 1.8; padding: 0 4px 0 5px; vertical-align: middle; width: 262px;
}
.cont .v {
line-height: 150px; text-indent:-9999px; width: 1px;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。