首页 文章

与Bootstrap 3垂直对齐

提问于
浏览 次
801

我正在使用Twitter Bootstrap 3，当我想垂直对齐两个 div 时，我遇到了问题 - 例如JSFiddle link：

<!-- 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 来修复它，但我认为这对于响应式设计来说不是一个好的解决方案 .

html css css3 twitter-bootstrap twitter-bootstrap-3

23 回答

  • 1

    以下代码对我有用：

    .vertical-align {
    display: flex;
    align-items: center;
}
    回复于
  • 1

    我刚刚做了这件事，它做了我想做的事 .

    .align-middle {
  margin-top: 25%;
  margin-bottom: 25%;
}

    现在我的页面看起来像

    <div class='container-fluid align-middle'>
    content

 ----------------------------------
 |                                |
 |   --------------------------   |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |   --------------------------   |
 |                                |
 ----------------------------------
    回复于
  • 3

    Update 2018

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

    Important! Vertical center is relative to the height of the parent

    如果您尝试居中的元素的父元素没有定义的高度，则垂直居中解决方案都不会起作用！

    Bootstrap 4

    现在BS4是 flexbox by default ，有许多不同的垂直对齐方法：auto-margins，flexbox utils或display utils以及vertical align utils . 起初"vertical align utils"似乎很明显，但这些仅适用于内联和表格显示元素 . 这里有一些Bootstrap 4垂直居中选项..

    1 - Vertical Center Using Auto Margins:

    垂直居中的另一种方法是使用 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>

    BS4 - Vertical center using auto-margins Demo

    my-auto 表示垂直y轴上的边距，相当于：

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

    2 - Vertical Center with 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>

    BS4 - Vertical center different height columns Demo

    3 - Vertical Center Using Display Utils:

    Bootstrap 4具有display utils，可用于 display:table ， display:table-cell ， display:inline 等 . 这些可与vertical alignment 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>

    BS4 - Vertical center using display utils Demo

    另见：Vertical Align Center in Bootstrap 4

    Bootstrap 3

    Flexbox method on the container of the item(s) to center:

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

    Transform translateY method:

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

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

    Display inline method:

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

    Demo of Bootstrap 3 centering methods

    回复于
  • 5

    使用Bootstrap 4（当前为alpha），您可以使用 .align-items-center 类 . 所以你可以保持Bootstrap的响应特性 . 工作对我来说很好 . 见Bootstrap 4 Documentation .

    回复于
  • 832

    灵活的盒子布局

    随着CSS Flexible Box的出现，许多网页设计师的噩梦1已经得到解决 . 最黑客的一个，垂直对齐 . 现在甚至可以在 unknown heights 中实现 .

    “二十年的布局黑客即将结束 . 也许不会在明天，但很快，在我们的余生中 . ” - CSS传奇Eric Meyer参加W3Conf 2013

    Flexible Box（或简称Flexbox）是一种专为布局目的而设计的新布局系统 . specification states：

    Flex布局在表面上类似于块布局 . 它缺少许多可用于块布局的更复杂的以文本或文档为中心的属性，例如浮点数和列 . 作为回报，它获得了简单而强大的工具，用于分配空间并以Web应用程序和复杂网页通常需要的方式对齐内容 .

    在这种情况下，它如何帮助？好的，我们等着瞧 .

    垂直对齐列

    使用Twitter Bootstrap我们有 .row s有一些 .col-* s . 我们需要做的就是将所需的 .row 2显示为flex container框，然后将所有flex item（列）垂直对齐align-items属性 .

    EXAMPLE HERE（请仔细阅读评论）

    <div class="container">
    <div class="row vertical-align"> <!--
                    ^--  Additional class -->
        <div class="col-xs-6"> ... </div>
        <div class="col-xs-6"> ... </div>
    </div>
</div>

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

    输出

    Vertical aligned columns in Twitter Bootstrap

    彩色区域显示填充框的列 .

    澄清对齐项目：中心

    8.3 Cross-axis Alignment：align-items属性Flex项目可以在flex容器的当前行的交叉轴上对齐，类似于justify-content但在垂直方向上 . align-items设置所有Flex容器项的默认对齐方式，包括匿名弹性项 . align-items：center;通过中心值，弹性项目的边距框位于线内的横轴中心 .

    大警报

    Important note #1: 除非您给列中的一个 .col-xs-# 类，否则Twitter Bootstrap不会在超小型设备中指定 width 列 .

    因此，在这个特定的演示中，我使用了 .col-xs-* 类，以便在移动模式下正确显示列，因为它明确指定了列的 width .

    但是，您也可以通过在特定屏幕尺寸中将 display: flex; 更改为 display: block; 来简化Flexbox布局 . 例如：

    /* Extra small devices (767px and down) */
@media (max-width: 767px) {
    .row.vertical-align {
        display: block; /* Turn off the flexible box layout */
    }
}

    或者你可以这样specify .vertical-align only on specific screen sizes：

    /* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .row.vertical-align {
        display: flex;
        align-items: center;
    }
}

    在那种情况下，我会选择@KevinNelson的approach .

    Important note #2: 由于简洁，省略了供应商前缀 . Flexbox语法在此期间已更改 . 新的书面语法不适用于旧版本的Web浏览器（但不像Internet Explorer 9那样旧！Internet Explorer 10及更高版本支持Flexbox） .

    这意味着您还应该在 生产环境 模式中使用像 display: -webkit-box 这样的供应商前缀属性 .

    如果单击Demo中的"Toggle Compiled View"，您将看到CSS声明的前缀版本（感谢Autoprefixer） .

    具有垂直对齐内容的全高列

    正如您在previous demo中看到的那样，列（弹性项目）不再像其容器一样高（弹性容器框，即 .row 元素） .

    这是因为 align-items 属性使用 center 值 . 默认值为 stretch ，以便项目可以填充父元素的整个高度 .

    为了解决这个问题，您还可以将 display: flex; 添加到列中：

    EXAMPLE HERE （再次，请注意评论）

    .vertical-align {
  display: flex;
  flex-direction: row;
}

.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
  display: flex;
  align-items: center;     /* Align the flex-items vertically */
  justify-content: center; /* Optional, to align inner flex-items
                              horizontally within the column  */
}

    输出

    Full-height columns with vertical aligned contents in Twitter Bootstrap

    彩色区域显示填充框的列 .

    Last, but not least ，请注意这里的演示和代码片段旨在为您提供不同的想法，以提供实现目标的现代方法 . 如果您打算在现实世界的网站或应用程序中使用此方法，请注意“ Big Alert ”部分 .

    有关浏览器支持的进一步阅读，这些资源将非常有用：

    1.垂直对齐div内的图像，响应高度为2.最好使用其他类，以免改变Twitter Bootstrap的默认.row .

    回复于
  • 6

    我遇到了同样的情况，我希望在一行中垂直对齐几个div元素，并发现Bootstrap类col-xx-xx将样式应用于div作为float：left .

    我必须在div元素上应用样式，如style =“Float：none”，并且所有div元素都垂直对齐 . 这是工作示例：

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

    以防有人想要阅读有关float属性的更多信息：

    W3Schools - Float

    回复于
  • 19

    我真的发现以下代码使用Chrome而不是当前选择的答案以外的其他浏览器：

    .v-center {
    display:table!important; height:125px;
}

.v-center div[class*='col-'] {
   display: table-cell!important;
   vertical-align:middle;
   float:none;
}
.v-center img {
   max-height:125px;
}

    您可能需要修改高度（特别是 .v-center ）并根据需要删除/更改 div[class*='col-'] 上的div .

    回复于
  • -3

    试试这个，

    .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>
    回复于
  • 19

    好吧，不小心我混了一个很少的解决方案，它最终适用于我的布局，我试图在最小分辨率下制作一个带有Bootstrap列的3x3表 .

    /* required styles */

#grid a {
  display: table;
}

#grid a div {
  display: table-cell;
  vertical-align: middle;
  float: none;
}


/* additional styles for demo: */

body {
  padding: 20px;
}

a {
  height: 40px;
  border: 1px solid #444;
}

a > div {
  width: 100%;
  text-align: center;
}

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div id="grid" class="clearfix row">
  <a class="col-xs-4 align-center" href="#">
    <div>1</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>2</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>3</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>4</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>5</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>6</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>7</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>8</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>9</div>
  </a>
</div>
    回复于
  • 3
    div{
    border:1px solid;
    }
    span{
    display:flex;
    align-items:center;

    }
    .col-5{
    width:100px;
    height:50px;
    float:left;
    background:red;
    }
    .col-7{
    width:200px;
    height:24px;
    

    float:left;
    background:green;

    }

    <span>
    <div class="col-5">
    </div>
    <div class="col-7"></div>
    </span>
    回复于
  • 16

    我遇到了同样的问题 . 在我的情况下，我不知道外部容器的高度，但这是我修复它的方式：

    首先设置 html 和 body 元素的高度，使它们为100％ . 这个很重要！如果没有这个， html 和 body 元素将简单地继承他们孩子的身高 .

    html, body {
   height: 100%;
}

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

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

    最后是带有类的内部容器：

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

    HTML非常简单：

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

    这就是垂直对齐内容所需的全部内容 . 在小提琴中查看：

    Jsfiddle

    回复于
  • 0

    不需要 table 和 table . 使用变换可以轻松实现 . 示例：http://codepen.io/arvind/pen/QNbwyM

    码：

    .child {
  height: 10em;
  border: 1px solid green;
  position: relative;
}
.child-content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row parent">
  <div class="col-xs-6 col-lg-6 child">
    <div class="child-content">
      <div style="height:4em;border:1px solid #000">Big</div>
    </div>
  </div>
  <div class="col-xs-6 col-lg-6 child">
    <div class="child-content">
      <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
  </div>
</div>
    回复于
  • 13

    这个答案提出了一个黑客，但我强烈建议你使用flexbox（如@Haschem答案中所述），因为它现在在任何地方都受到支持 .

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

    您仍然可以在需要时使用自定义类：

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

    <div class="row">
    <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">Small</div>
    </div>
</div>

    Bootply

    如果在代码中放置一个真实空间（如 ...</div> </div>... ），则使用 inline-block 会在块之间添加额外的空间 . 如果列大小合计为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="[...] col-lg-2"> 和 <div class="[...] col-lg-10"> （回车和2个标签/ 8个空格）之间有额外的空格 . 所以...

    Enter image description here

    让我们踢出这个额外的空间!!

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

    Enter image description here

    请注意看似无用的评论 <!-- ... --> ？它们是 important - 没有它们， <div> 元素之间的空白将占用布局中的空间，从而破坏了网格系统 .

    注意：Bootply已更新

    回复于
  • 11

    在div的CSS中尝试这个：

    display: table-cell;
vertical-align: middle;
    回复于
  • 0

    根据接受的答案，如果您不希望自定义标记，分离关注点或仅仅因为您使用CMS，以下解决方案可以正常工作：

    .valign {
  font-size: 0;
}

.valign > [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 valign">
   <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>

    这里的限制是您不能从父元素继承字体大小，因为该行将字体大小设置为0以删除空格 .

    回复于
  • 861

    自Bootstrap 4以来，本机支持Flex行为 . 在 row 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>

    资料来源：https://getbootstrap.com/docs/4.0/utilities/flex/

    回复于
  • 32

    这是我的解决方案 . 只需将此类添加到您的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>
    回复于
  • 25

    有几种方法可以做到这一点

    1 .

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

    以及容器的css

    display:table;

    • 使用填充和媒体屏幕相对于屏幕大小更改填充 . 谷歌@media屏幕了解更多

    • 使用相对填充，即以％表示填充

    希望能帮助到你

    回复于
  • 21

    HTML

    <div class="row">
    <div class="col-xs-2 pull-bottom"
         style="height:100px;background:blue">
    </div>
    <div class="col-xs-8 pull-bottom"
         style="height:50px;background:yellow">
    </div>
</div>

    CSS

    .pull-bottom {
    display: inline-block;
    vertical-align: bottom;
    float: none;
}
    回复于
  • 10

    我想我会分享我的“解决方案”，以防它帮助其他不熟悉@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等）需要更高级的finagling，但对于带-xs的简单页面堆叠和-sm和更大的行，这工作正常 .

    回复于
  • 8

    如果您使用的是Less版本的Bootstrap，并且自己编译成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>
    回复于
  • 7

    我在zessx's answer上详细说明了一下，以便在不同的屏幕尺寸上混合不同的列尺寸时更容易使用 .

    如果您使用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>
    回复于
  • 2

    我更喜欢这种方法David Walsh Vertical center CSS：

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

    transform 不是必不可少的;它只是更准确地找到中心 . 因此，Internet Explorer 8可能会稍微不那么集中，但它仍然不错 - Can I use - Transforms 2d .

    回复于

相关问题