在 Bootstrap 的栅格系统中如何将文字垂直居中?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

在 Bootstrap 的栅格系统中如何将文字垂直居中?

云栖技术 2016-05-25 09:16:15 5110

代码:

<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">上还是

上都没有用。

也在 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;
}

结果虽然文字垂直居中了,但是又出现了新的问题:
screenshot
整个页面右边出现了一条白边,用开发者工具看的时候发现这条白边在外面(?)

请问如何才能在不影响页面布局等的情况下将栅格中的文字垂直居中?非常感谢。

前端开发 JavaScript 开发者
分享到
取消 提交回答
全部回答(1)
  • 云栖技术
    2019-07-17 19:13:25

    首先声明,这个方案不能在 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;
        }
      }
    }
    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题