如何在垂直中间对齐Bootstrap div内容

时间：2018-11-13 07:37:38

标签： css twitter-bootstrap-3 vertical-alignment

我连续有三个div。第一个div将动态接收内容。根据我的第一个div的高度，我需要将第二个和第三个div的内容垂直居中对齐。我为我的div使用引导程序类。

我希望输出如下。有人可以帮忙吗。

enter image description here 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="parent">
  <div class="col-lg-3 child">
    <p>It is a dynamic content</p>
    <p>Sample</p>
    <p>Sample</p>
    <p>Sample</p>
  </div>
  <div class="col-lg-3 child">
    <p>Static content which needs to be aligned vertically middle</p>
  </div>
  <div class="col-lg-3 child">
    <p>Sample</p>
  </div>
</div>
"[[\"aaa\",1,2,3,4],[\"bbb\",1,2,3]]"

2 个答案:

答案 0 :(得分：0)

You should use default Bootstrap classes. I changed .parent into .row and added .d-flex and .align-items-center to achieve the desired result.

Absolute positioning for the flex items is not necessary and removed.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row d-flex align-items-center">
  <div class="col-lg-3 child">
    <p>It is a dynamic content</p>
    <p>Sample</p>
    <p>Sample</p>
    <p>Sample</p>
  </div>
  <div class="col-lg-3 child">
    <p>Static content which needs to be aligned vertically middle</p>
  </div>
  <div class="col-lg-3 child">
    <p>Sample</p>
  </div>
</div>

答案 1 :(得分：0)

我只使用Boostrap类-在 align-items-center 类中垂直居中，在 justify-content-center 类中水平居中。

 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" 
 href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js">
    <link rel="stylesheet" 
 href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <style>

    </style>
 </head>

 <body>
 <div class="row d-flex align-items-center justify-content-center">
    <div class="col-lg-3">
        <p>It is a dynamic content</p>
        <p>Sample</p>
        <p>Sample</p>
        <p>Sample</p>
    </div>
    <div class="col-lg-3">
        <p>Static content which needs to be aligned vertically middle</p>
    </div>
    <div class="col-lg-3">
        <p>Sample</p>
    </div>
 </div>
 </body>
 </html>
相关问题
最新问题