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

当前回答

更新2020

我知道最初的问题是关于引导3的，但是现在引导4已经发布了，这里有一些关于垂直中心的更新指南。

重要!垂直中心相对于父节点的高度

如果你试图居中的元素的父元素没有定义高度，没有垂直定心解决方案将工作!

引导4

现在Bootstrap 4默认是flexbox，有许多不同的方法来使用垂直对齐:自动边距，flexbox utils，或显示utils和垂直对齐utils。乍一看，“垂直对齐utils”似乎很明显，但这些只适用于内联和表格显示元素。这里有一些Bootstrap 4垂直定心选项。

1 -垂直中心使用自动边距:

另一种垂直居中的方法是使用my-auto。这将使元素在其容器内居中。例如，h-100使行全高，my-auto将使col-sm-12列垂直居中。

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

引导4 -垂直中心使用自动边际演示

My-auto表示垂直y轴上的边距，等价于:

margin-top: auto;
margin-bottom: auto;

2 -垂直中心与Flexbox:

因为Bootstrap 4 .row现在是display:flex，你可以简单地使用align-self-center在任何列上垂直居中…

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

或者，在整个.row上使用align-items-center来垂直居中对齐行中所有的col-*…

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

引导4 -垂直中心不同高度列演示

3 -垂直中心使用显示Utils:

Bootstrap 4具有可用于display:table、display:table-cell、display:inline等的显示utils。这些可以与垂直对齐utils一起使用，以对齐内联、内联块或表格单元格元素。

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

引导4 -垂直中心使用显示utils演示

还看到: 在引导4中垂直对齐中心

引导3

将容器上的物品调整到居中:

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

转换翻译方法:

.transform-center-parent {
    position: relative;
    transform-style: preserve-3d;
}

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

显示内联方法:

.display-inline-block {
    display: inline;
}
.display-inline-block > div {
    display: inline-block;
    float: none;
    vertical-align: middle;
}

演示Bootstrap 3定心方法

2017-03-21 12:14:16

其他回答

对于最新版本的引导，您可以使用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

我想我应该分享我的“解决方案”，以防它能帮助那些不熟悉@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和更大的行，这很好。

2015-01-05 00:05:31

我遇到了同样的情况，我想在一行中垂直对齐一些div元素，并发现Bootstrap类col-xx-xx将样式应用于div为float: left。

我必须在div元素上应用样式，如style="Float:none"，我所有的div元素开始垂直对齐。下面是工作示例:

<div class="col-lg-4" style="float:none;">

JsFiddle Link

以防有人想了解更多关于float属性的知识:

W3Schools -浮动

2014-08-13 17:40:08

有几种方法可以做到:

使用显示:表格单元; vertical-align:中间; 和容器的CSS 显示:表; 使用填充与媒体屏幕，以改变填充相对于屏幕大小。谷歌@media屏幕了解更多。使用相对填充也就是说，用%来指定填充

2017-06-25 05:40:39

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

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

垂直对齐引导3

推荐文章

最新文章

标签