首页 / 问答 / Bootstrap 如何实现两个元素垂直居中对齐呢?

Bootstrap 如何实现两个元素垂直居中对齐呢?

0

在Bootstrap进行前端网页设计和开发中,现需要对两个div元素进行垂直居中对齐,示例如下:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-xs-5">
    <div style="height:5em;border:1px solid #000">Big</div>
  </div>
  <div class="col-xs-5">
    <div style="height:3em;border:1px solid #F00">Small</div>
  </div>
</div>

运行结果如下:

现需要让右侧的div(Small)与左侧的div垂直居中对齐,应该如何解决这个问题呢?

回复 [×]
提交评论
请输入评论内容

3 个回答

  • 0

    使用flex布局,首先定义基于flex的样式如下:

    HTML布局示例如下:

    运行效果如下:

    Rector的个人主页

    Rector

    03-19 回答

    • 0

      你可以自定义一个垂直居中的样式类,如下:

      然后使用这个垂直居中样式,如下:

      运行效果如下:

      Rector的个人主页

      Rector

      03-19 回答

      • 0

        由于Bootstrap 4默认采用的为flexbox布局,所以可以有多种不同的方式来实现垂直居中对齐,以下为使用Flexbox实现的不同高度下的垂直居中对齐:

        运行效果:

        Rector的个人主页

        Rector

        03-19 回答

        我来回答