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

当前回答

我更喜欢这个方法，根据David Walsh垂直中心CSS:

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

转换不是必要的;它只是找到了更精确的中心。Internet Explorer 8可能会因此稍微不那么居中，但它仍然不错-我可以使用-转换2d。

2015-02-14 19:21:56

其他回答

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

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

试试这个

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

2022-08-17 08:22:15

这就是我的解。只需将这个类添加到您的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>

2018-05-02 12:10:54

从Bootstrap 4开始，Flex行为就得到了原生支持。在行div中添加d-flex align-items-center。您不再需要修改CSS内容。

简单示例:http://jsfiddle.net/vgks6L74/

<!-- language: html -->
<div class="row d-flex align-items-center">
  <div class="col-5 border border-dark" style="height:10em">  Big </div>
  <div class="col-2 border border-danger" style="height:3em"> Small </div>
</div>

用你的例子: http://jsfiddle.net/7zwtL702/

<!-- language: html -->
<div class="row d-flex align-items-center">
    <div class="col-5">
        <div class="border border-dark" style="height:10em">Big</div>
    </div>
    <div class="col-2">
        <div class="border border-danger" style="height:3em">Small</div>
   </div>
</div>

来源:Flex·Bootstrap

2017-10-16 21:06:16

我详细阐述了zessx的答案，以便在不同屏幕尺寸上混合不同的列大小时更容易使用。

如果你使用Sass，你可以把这个添加到你的scss文件中:

@mixin v-col($prefix, $min-width) {
    @media (min-width: $min-width) {
        .col-#{$prefix}-v {
            display: inline-block;
            vertical-align: middle;
            float: none;
        }
    }
}

@include v-col(lg, $screen-lg);
@include v-col(md, $screen-md);
@include v-col(sm, $screen-sm);
@include v-col(xs, $screen-xs);

它生成以下CSS(如果你不使用Sass，你可以直接在你的样式表中使用):

@media (min-width: 1200px) {
    .col-lg-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 992px) {
    .col-md-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 768px) {
    .col-sm-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 480px) {
    .col-xs-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

现在你可以像这样在你的响应列上使用它:

<div class="container">
    <div class="row">
        <div class="col-sm-7 col-sm-v col-xs-12">
            <p>
                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
            </p>
        </div><div class="col-sm-5 col-sm-v col-xs-12">
            <p>
                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-7 col-md-v col-sm-12">
            <p>
                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
            </p>
        </div><div class="col-md-5 col-md-v col-sm-12">
            <p>
                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
            </p>
        </div>
    </div>
</div>

2016-06-09 17:41:48

垂直对齐引导3

推荐文章

最新文章

标签