垂直居中 CSS 规则适用于行，但不适用于 bootstrap3 中的列 [英] Vertically center CSS rule works for row but not for column in bootstrap3

问题描述

我正在尝试使用以下 CSS 规则在引导程序 3 中垂直居中对齐内容 -

.center {显示:弹性；align-items:center !important;背景颜色:红色；文字对齐:居中；}@media(最小宽度:768px){.中央 {显示:弹性；align-items:center !important;背景颜色:红色；文字对齐:居中；}}@media(最小宽度:992px){.中央 {显示:弹性；align-items:center !important;背景颜色:红色；文字对齐:居中；}}@media(最小宽度:1200px){.中央 {显示:弹性；align-items:center !important;背景颜色:红色；文字对齐:居中；}}

而且，这是我的 html

<!--如果 .center 在这里 valign 有效--><div class="col-sm-4"><!--如果 .center 在这里 valign 不起作用-->测试
<div class="col-sm-8">测试
测试
测试

您可以在 codepen.io 中找到它.

有什么帮助吗?

解决方案

您可以通过两种方式做到这一点.

1. 使用绝对位置

2. 使用display:table

使用绝对位置

DESC:将父元素{{position:relative}}和子元素(要居中的元素)作为

<代码>{位置:绝对；顶部:50%；变换:translateY(-50%);-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);}

使用表格块

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

注意*:{table-row} 的高度应该大于其内容.

I am trying to use the following CSS rules to vertically center aligned content in 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;     
  }
}

And, here is my 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>    

You can find it in codepen.io.

Any help?

解决方案

You can do this in two ways.

1. Using Absolute position

2. Using display:table

USING ABSOLUTE POSITION

DESC: Give parent element {{position:relative}} and child(element to be centered) as

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

USING TABLE BLOCK

DESC: Give parent element as display:table;width:100% and second parent as display:table-cell;vertical-align:middle;

Note*: {table-row} should have some height greater than its content.

这篇关于垂直居中 CSS 规则适用于行，但不适用于 bootstrap3 中的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！