如何在引导程序中使用垂直对齐 [英] How to use vertical align in bootstrap

问题描述

简单问题:如何使用 bootstrap 在 col 中垂直对齐 col?示例在这里(我想垂直对齐 child1a 和 child1b):

http://bootply.com/73666

HTML

<div class="col-lg-6 col-md-6 col-12 child1"><div class="col-12 child1a">子内容1a</div><div class="col-12 child1b">子内容1b</div>
<div class="col-lg-6 col-md-6 col-12 child2">子内容 2
子内容 2
子内容 2
子内容 2
子内容 2

更新

一些 CSS:

.col-lg-12{顶部:40px；底部:0px;边框:4px 纯绿色；}.child1a, .child1b{边框:4px纯黑色；显示:内联块！重要；}.child1{边框:4px 纯蓝色；高度:300px；显示:表格单元格！重要；垂直对齐:中间；}.child2{边框:4px 纯红色；}

解决方案

.parent {显示:表；表格布局:固定；}.孩子 {显示:表格单元格；垂直对齐:中间；文字对齐:居中；}

table-layout: fixed 防止破坏 col-* 类的功能.

Simple problem: How do I vertically align a col within a col using bootstrap? Example here (I want to vertically align child1a and child1b):

http://bootply.com/73666

HTML

<div class="col-lg-12">

  <div class="col-lg-6 col-md-6 col-12 child1">
    <div class="col-12 child1a">Child content 1a</div>
    <div class="col-12 child1b">Child content 1b</div>

  </div>


  <div class="col-lg-6 col-md-6 col-12 child2">
  Child content 2<br>
  Child content 2<br>
  Child content 2<br>
  Child content 2<br>
  Child content 2<br>

  </div>

</div>

UPDATE

Some CSS:

.col-lg-12{
top:40px;
bottom:0px;
border:4px solid green;


}

  .child1a, .child1b{
  border:4px solid black;
  display:inline-block !important;
}

.child1{
  border:4px solid blue;
  height:300px;
  display:table-cell !important;
  vertical-align:middle;
}

.child2{
  border:4px solid red;
}

解决方案

.parent {
    display: table;
    table-layout: fixed;
}

.child {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

table-layout: fixed prevents breaking the functionality of the col-* classes.

这篇关于如何在引导程序中使用垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！