开发者社区> 问答> 正文

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

上都没有用。

也在 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
整个页面右边出现了一条白边,用开发者工具看的时候发现这条白边在外面(?)

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

展开
收起
云栖技术 2016-05-25 09:16:15 8554 0
1 条回答
写回答
取消 提交回答
  • 社区爱好者,专为云栖社区服务!

    首先声明,这个方案不能在 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;
        }
      }
    }
    2019-07-17 19:13:25
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载