垂直对齐引导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来修复它，但我认为这不是响应式设计的一个很好的解决方案。

当前回答

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

2017-03-20 14:46:05

其他回答

下面的代码适合我:

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

2016-10-01 15:01:28

对于最新版本的引导，您可以使用align-items-center。使用flexbox容器上的align-items实用程序来更改flex项在交叉轴上的对齐方式(起始为y轴，如果flex-direction: column则为x轴)。从开始、结束、中心、基线或拉伸(浏览器默认值)中选择。

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

2020-07-14 01:05:03

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

首先设置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>

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

杰斯菲德尔

2014-12-28 12:08:01

这个答案是一个黑客，但我强烈建议你使用flexbox(正如@Haschem回答中所述)，因为现在到处都支持它。

演示链接: - Bootstrap 3 - Bootstrap 4 alpha 6

你仍然可以在需要的时候使用自定义类:

.vcenter { 显示:inline-block; vertical-align:中间; 浮:没有; ｝ < div class = "行" > <div class="col-xs-5 col-md-3 col-lg-1 vcenter"> <div style="height:10em;border:1px solid #000">Big</div> < / div > < !-- ——><div class="col-xs-5 col-md-7 col-lg-9 vcenter"> <div style="height:3em;border:1px solid #F00">小</div> < / div > < / div >

引导

使用内联块在块之间增加额外的空间，如果你在你的代码中允许一个真正的空间(如…< / div > < / div >……)。如果列的大小加起来是12，这个额外的空格就会破坏我们的网格:

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div>
    <div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

这里，我们在<div class="[…]<div class="[…][col-lg-10">(一个回车符和2个制表符/8个空格)。所以…

让我们踢开这多余的空间!!

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

注意看似无用的注释<!——……——> ?它们很重要——如果没有它们，<div>元素之间的空格将占据布局中的空间，破坏网格系统。

注意:Bootply已经更新

2013-12-12 16:17:03

我花了很多时间从这里尝试解决方案，但没有一个对我有帮助。几个小时后，我相信这将允许你在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

垂直对齐引导3

推荐文章

最新文章

标签