Question

我正在尝试使用以下CSS规则在bootstrap 3中垂直居中对齐的内容 -

.center {
   display:flex;
   align-items:center !important;
   background-color:red;
   text-align:center;     
}

@media ( min-width:768px ) {
  .center {
     display:flex;
     align-items:center !important;
     background-color:red;
     text-align:center;     
   }
}

@media ( min-width: 992px ) {
  .center {
   display:flex;
   align-items:center !important;
   background-color:red;
   text-align:center;     
  }
}
@media ( min-width: 1200px ) {
.center {
    display:flex;
    align-items:center !important;
    background-color:red;
    text-align:center;     
  }
}

而且，这是我的HTML

<div class="row center"> <!--if .center is here valign works-->
  <div class="col-sm-4"> <!--if .center is here valign doesn't work-->
     test
  </div>    
<div class="col-sm-8 ">
  test </br>
  test </br>
  test </br>
</div>

您可以在codepen.io.

中找到它

任何帮助？

Answer 1

你可以用两种方式做到这一点。

使用绝对位置
使用 display：table

使用绝对的位置

DESC：将父元素{{position：relative}}和子元素（元素居中）作为

{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
}

使用表格块

DESC：将父元素设为display:table;width:100%，将第二个父元素设为display:table-cell;vertical-align:middle;

注意* ：{table-row}应该有一些高于其内容的高度。

垂直居中的CSS规则适用于行，但不适用于bootstrap 3中的列

1 个答案: