垂直对齐引导3

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

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

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

当前回答

试试这个

<div class="d-flex align-items-center">
    ...
</div>

2022-08-17 08:22:15

其他回答

下面的代码适合我:

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

2016-10-01 15:01:28

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 >

2017-05-16 08:06:50

在Bootstrap 4(目前处于alpha阶段)中，您可以使用.align-items-center类。所以你可以保持Bootstrap的响应特性。对我来说，直接工作很好。参见Bootstrap 4文档。

2017-03-20 14:46:05

我花了很多时间从这里尝试解决方案，但没有一个对我有帮助。几个小时后，我相信这将允许你在BS3的任何子元素的中心。

CSS

.vertical-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

HTML

<div class="col-md-6 vertical-center">
    <div class="container">
        <div class="row">
        </div> 
    </div>   
</div>

2020-10-10 01:46:36

在div的CSS中试试这个:

display: table-cell;
vertical-align: middle;

2013-12-12 16:20:32

垂直对齐引导3

推荐文章

最新文章

标签