我使用Twitter Bootstrap 3,当我想垂直对齐两个div时,我有问题,例如- JSFiddle链接:

<!-- 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>

Bootstrap中的网格系统使用float: left,而不是display:inline-block,因此属性vertical-align不起作用。我尝试使用margin-top来修复它,但我认为这不是响应式设计的一个很好的解决方案。


当前回答

div { 边框:1px实体; } 跨度{ 显示:flex; 对齐项目:中心; } .col-5 { 宽度:100 px; 高度:50 px; 浮:左; 背景:红色; } .col-7 { 宽度:200 px; 高度:24 px; 浮:左; 背景:绿色; } < span > < div class = " col-5”> < / div > < div class = " col-7 " > < / div > < / span >

其他回答

我想我应该分享我的“解决方案”,以防它能帮助那些不熟悉@media查询的人。

感谢@HashemQolami的回答,我构建了一些媒体查询,可以像col-*类一样向上移动,这样我就可以在移动中堆叠col-*,但在更大的屏幕中垂直对齐地显示它们。

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

更复杂的布局要求每个屏幕分辨率的列数不同(例如-xs为2行,-sm为3行,-md为4行,等等)将需要一些更高级的欺骗,但对于一个简单的页面,-xs堆叠,-sm和更大的行,这很好。

我也遇到了同样的问题。在我的情况下,我不知道外容器的高度,但这是我如何固定它:

首先设置html和body元素的高度,使它们为100%。这很重要!如果没有这一点,html和body元素将简单地继承它们的子元素的高度。

html, body {
   height: 100%;
}

然后我有一个外部容器类:

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

最后是带class的内部容器:

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

HTML非常简单:

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

这就是垂直对齐内容所需要的全部内容。看看小提琴:

杰斯菲德尔

这就是我的解。只需将这个类添加到您的CSS内容。

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

然后你的HTML看起来是这样的:

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

如果你正在使用Bootstrap的Less版本,并且自己编译成CSS,你可以使用一些实用工具类来使用Bootstrap类。

我发现当我想保持Bootstrap网格系统的响应性和可配置性(比如使用-md或-sm)时,这些方法工作得非常好,但我希望给定行的所有列都具有相同的垂直高度(这样我就可以垂直对齐它们的内容,并让行中的所有列共享一个公共的中间位置)。

CSS /少:

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

试试这个,

.exe { font-size: 0; } .exe > [class*="col"] { display: inline-block; float: none; font-size: 14px; font-size: 1rem; vertical-align: middle; } <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/> <div class="row exe"> <div class="col-xs-5"> <div style="height:5em;border:1px solid grey">Big</div> </div> <div class="col-xs-5"> <div style="height:3em;border:1px solid red">Small</div> </div> </div>