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

发布于 2022-08-29 17:39:18 字数 1262 浏览 9 评论 0

代码：

......
<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;
}

结果虽然文字垂直居中了，但是又出现了新的问题：

Problem

整个页面右边出现了一条白边，用开发者工具看的时候发现这条白边在<html>外面（？）

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

分分钟 2022-09-05 17:39:18

首先声明，这个方案不能在 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

悲喜皆因你 2022-09-05 17:39:18

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

回复收藏 0