vertical-align with Bootstrap 3

I'm using Twitter Bootstrap 3, and I have problems when I want to align vertically two div, for example — JSFiddle link:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<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>

The grid system in Bootstrap uses float: left, not display:inline-block, so the property vertical-align doesn't work. I tried using margin-top to fix it, but I think this is not a good solution for the responsive design.

标签： html css css3 twitter-bootstrap twitter-bootstrap-3

23条回答

泪湿衣

2楼-- · 2018-12-31 00:56

This is my solution. Just add this class to your css.

.align-middle {
  display:flex;
  justify-content:center;
  align-items:center;
}

Then your HTML would look like this.

<div class="col-xs-12 align-middle">
  <div class="col-xs-6" style="background-color:blue;">
    <h3>Item</h3>
    <h3>Item</h3>
  </div>
  <div class="col-xs-6" style="background-color:red;">
    <h3>Item</h3>
  </div>
</div>

.align-middle {
  display:flex;
  justify-content:center;
  align-items:center;
}

<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
    <title>Title</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12 align-middle">
          <div class="col-xs-6" style="background-color:blue;">
            <h3>Item</h3>
            <h3>Item</h3>
          </div>
          <div class="col-xs-6" style="background-color:red;">
            <h3>Item</h3>
          </div>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>

0人赞添加讨论(0) 举报

不再属于我。

3楼-- · 2018-12-31 00:56

If you are using the Less version of Bootstrap, and compiling into CSS yourself, you can use some utility classes to use with Bootstrap classes.

I've found these to work fantastically well where I want to preserve the responsiveness and configurability of the Bootstrap grid system (like using -md or -sm), but I want all columns in a given row to all have the same vertical height (so that I can then vertically align their content and have all columns in the row share a common middle).

CSS/Less:

.display-table {
    display: table;
    width: 100%;
}
.col-md-table-cell {
    @media (min-width: @screen-md-min) {
        display: table-cell;
        vertical-align: top;
        float: none;
    }
}
.col-sm-table-cell {
    @media (min-width: @screen-sm-min) {
        display: table-cell;
        vertical-align: top;
        float: none;
    }
}
.vertical-align-middle {
    vertical-align: middle;
}

HTML:

<div class="row display-table">
    <div class="col-sm-5 col-sm-table-cell vertical-align-middle">
        ...
    </div>
    <div class="col-sm-5 col-sm-table-cell vertical-align-middle">
        ...
    </div>
</div>

0人赞添加讨论(0) 举报

梦寄多情

4楼-- · 2018-12-31 00:58

I thought I'd share my "solution" in case it helps anyone else who isn't familiar with the @media queries themselves.

Thanks to @HashemQolami's answer, I built some media queries that would work mobile-up like the col-* classes so that I could stack the col-* for mobile but display them vertically-aligned in the center for larger screens, e.g.

<div class='row row-sm-flex-center'>
    <div class='col-xs-12 col-sm-6'></div>
    <div class='col-xs-12 col-sm-6'></div>
</div>

.row-xs-flex-center {
    display:flex;
    align-items:center;
}
@media ( min-width:768px ) {
    .row-sm-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 992px ) {
    .row-md-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 1200px ) {
    .row-lg-flex-center {
        display:flex;
        align-items:center;
    }
}

More complicated layouts that require a different number of columns per screen resolution (e.g. 2 rows for -xs, 3 for -sm, and 4 for -md, etc.) would need some more advanced finagling, but for a simple page with -xs stacked and -sm and larger in rows, this works fine.

0人赞添加讨论(0) 举报

泛滥B

5楼-- · 2018-12-31 00:59

The below code worked for me:

.vertical-align {
    display: flex;
    align-items: center;
}

0人赞添加讨论(0) 举报

大哥的爱人

6楼-- · 2018-12-31 01:02

I prefer this method as per David Walsh Vertical center CSS:

.children{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

The transform isn't essential; it just finds the center a little more accurately. Internet Explorer 8 may be slightly less centered as a result, but it is still not bad - Can I use - Transforms 2d.

0人赞添加讨论(0) 举报

琉璃瓶的回忆

7楼-- · 2018-12-31 01:02

I ran into this same issue. In my case I did not know the height of the outer container, but this is how I fixed it:

First set the height for your html and body elements so that they are 100%. This is important! Without this, the html and body elements will simply inherit the height of their children.

html, body {
   height: 100%;
}

Then I had an outer container class with:

.container {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
}

And lastly the inner container with class:

.inner-container {
  display: table-cell;
  vertical-align: middle;
}

HTML is as simple as:

<body>
   <div class="container">
     <div class="inner-container">
        <p>Vertically Aligned</p>
     </div>
   </div>
</body>

This is all you need to vertically align contents. Check it out in fiddle:

Jsfiddle

0人赞添加讨论(0) 举报

1 2 3 4 下一页