如何在引导程序中使用垂直对齐

Posted 2023-03-05

【中文标题】如何在引导程序中使用垂直对齐

【英文标题】：How to use vertical align in bootstrap

【发布时间】：2013-08-14 01:36:29

【问题描述】：

简单问题：如何使用引导程序在 col 中垂直对齐 col？这里的例子（我想垂直对齐child1a和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>

更新

一些 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;

【问题讨论】：

[***.com/questions/20547819/… 中提供的解决方案效果很好！ [1]：***.com/questions/20547819/…

【参考方案1】：

你的意思是你想让1b和1b并排？

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

【讨论】：

那将是水平而不是垂直对齐

但它已经垂直对齐了？不是吗？ 1a 已经高于 1b

垂直对齐，所以在父div中间上下等间距

【参考方案2】：

对于家长：display: table;

给孩子：display: table-cell;

然后添加vertical-align: middle;

我可以做一个小提琴，但现在回家了，耶！

好的，这里是可爱的小提琴：http://jsfiddle.net/lharby/AJAhR/

.parent 
   display:table;


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

【讨论】：

问题是关于引导网格视图。如何在不破坏引导网格操作的情况下包含表格、表格单元方法。

【参考方案3】：

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


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

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

【讨论】：

表格布局：已修复！那是我忘记添加的属性。没有它，表格自动布局将覆盖 Bootstrap 设置的元素宽度。谢谢提醒。

我必须将float: none 添加到.child。否则display 无论如何都被视为block（而不是table-cell）。很奇怪，因为每个人似乎都对提议的解决方案感到满意。我正在使用 Bootstrap 3.3.5，没什么特别的。

@philippe_b 也必须这样做。 float: center 暗示 display: block 我猜它优先于 display: table-cell。

还必须将float: none 添加到.child 才能使其工作。干得好，顺便说一句。在获得多个高度投票的答案后，唯一对我有用的答案。

【参考方案4】：

http://jsfiddle.net/b9chris/zN39r/

HTML：

<div class="item row">
    <div class="col-xs-12 col-sm-6"><h4>This is some text.</h4></div>
    <div class="col-xs-12 col-sm-6"><h4>This is some more.</h4></div>
</div>

CSS：

div.item div h4 
    height: 60px;
    vertical-align: middle;    
    display: table-cell;

重要提示：

vertical-align: middle; display: table-cell; 必须应用于未应用 Bootstrap 类的标签；它不能是col-*、row 等。 很遗憾，如果您的 HTML 中没有这个额外的、可能毫无意义的标签，就无法做到这一点。 背景是不必要的 - 它们只是用于演示目的。因此，您无需对row 或col-* 标签应用任何特殊规则。 重要的是要注意内部标签不会拉伸到其父标签宽度的 100%；在我们的场景中，这无关紧要，但对你来说可能。如果是这样，您最终会得到更接近其他一些答案的结果：

http://jsfiddle.net/b9chris/zN39r/1/

CSS：

div.item div 
    background: #fdd;
    table-layout: fixed;
    display: table;

div.item div h4 
    height: 60px;
    vertical-align: middle;    
    display: table-cell;
    background: #eee;

注意col-* 标签上添加的表格布局和显示属性。这必须应用于应用了col-* 的标签；它对其他标签没有帮助。

【参考方案5】：

也许是一个老话题，但如果有人需要进一步的帮助，请执行以下操作（如果文本的高度大于文本，则将文本放在图像的中间行）。

HTML：

<div class="row display-table">
    <div class="col-xs-12 col-sm-4 display-cell">
        img
    </div>
    <div class="col-xs-12 col-sm-8 display-cell">
        text
    </div>
</div>

CSS：

.display-table
    display: table;
    table-layout: fixed;


.display-cell
    display: table-cell;
    vertical-align: middle;
    float: none;

我错过的重要事情是“float: none;”因为它从引导 col 属性中得到了浮动。

干杯！

【讨论】：

谢谢，但使用这个例子我发现列堆叠停止工作

但是这个解决方案没有响应

【参考方案6】：

我必须添加宽度：100%；当我使用此示例时，显示表格以修复 IE 和 FF 中的一些奇怪行为。 IE 和 FF 在正确宽度显示 col-md-* 标签时遇到了一些问题

.display-table 
        display: table;
        table-layout: fixed;
        width: 100%;


.display-cell 
        display: table-cell;
        vertical-align: middle;
        float: none;

【讨论】：

当你说“当我使用这个例子时”你指的是什么例子。

抱歉，我无法在引用的示例中添加评论...这里是我的完整代码：.display-table display: table;表格布局：固定；宽度：100%； .display-cell 显示：表格单元；垂直对齐：中间；浮动：无；

【参考方案7】：

使用 Bootstrap 4，您可以更轻松地做到这一点：http://v4-alpha.getbootstrap.com/layout/flexbox-grid/#vertical-alignment

【参考方案8】：

普林森的回答是最好的选择。但是，要解决列不折叠的问题，他的代码需要被媒体检查语句包围。这样，这些样式仅在较大的列处于活动状态时应用。这是更新后的完整答案。

HTML：

<div class="row display-table">
    <div class="col-xs-12 col-sm-4 display-cell">
        img
    </div>
    <div class="col-xs-12 col-sm-8 display-cell">
        text
    </div>
</div>

CSS：

@media (min-width: 768px)
   .display-table
       display: table;
       table-layout: fixed;
   

   .display-cell
       display: table-cell;
       vertical-align: middle;
       float: none;