垂直对齐 Bootstrap 3 列的内容

Posted 2023-02-19

【中文标题】垂直对齐 Bootstrap 3 列的内容

【英文标题】：Vertically align content of Bootstrap 3 column

【发布时间】：2013-09-11 23:50:29

【问题描述】：

在中断四年后回到网络开发之后，我很难将引导程序 3 列的内容与下一列垂直对齐。我已经尝试过搜索这个网站以及一般的一般搜索，只是没有提出正确的解决方案......或者我的搜索词很差。

在下面的 html/CSS 中，我想将左栏中的“页面标题”文本垂直居中。我想在使用 Bootstrap 3 CSS 时尽可能保持 HTML 和 CSS 简洁，所以我只是觉得我完全错过了一些简单的东西。

HTML

<div class="row page-header-box">
<div class="col-md-2 col-sm-2 col-xs-3 page-header-title">Page Title</div>
<div class="col-md-10 col-sm-10 col-xs-9 page-header-seperator">
    <div class="page-header-description"><small>Standard Text Description</small></div>
    <div class="page-header-alt"><small>Additional Text Description</small></div>
</div>

CSS

.page-header-box 背景颜色：#3D3D3D； 边框底部：5px 实心#b3b5b8; 边距底部：10px； .page-header-title color:#f79239;text-align:right;vertical-align:middle;margin:10px 0; .page-header-seperator border-left:5px solid #4e2f91;margin:10px 0; .page-header-description 颜色:#febe10; .page-header-alt margin-top:5px;color:#0093b2;

这是一个 jsFiddle ...http://jsfiddle.net/E6LcY/8/

这是我发布过的为数不多的帖子之一，因此为我指明正确的方向会很棒。

【问题讨论】：

vertical alignment of elements in a div的可能重复

我已经看到了在那个 SO 中链接的帖子......“理解垂直对齐......”如果可能的话，我特别想留在 Bootstrap 3 框架内。如果那是不可能的，因为我可能误解了垂直对齐的使用，那么我只会让 css 的标题对齐在左列的顶部。

我通常会忽略 5 年前的帖子，因为我认为旧的现状可能已经改变。看来我错了，可能应该吃乌鸦（足够辣酱很好吃）。我希望我只是错过了一些愚蠢的东西，我真的只需要 RTFM！由于我真的不想从引导程序进行更改，因此我可能会坚持使用此最终版本并使文本与顶部对齐，而不是尝试垂直对齐。 jsfiddle.net/E6LcY/8 抱歉浪费您的时间。也许我应该删除这个问题？

使用一些 JS，我想出了这个...jsfiddle.net/E6LcY/13

在 Firefox 中不起作用。

【参考方案1】：

将规则：line-height: 45px; 添加到 col-md-2 类

UPDATED FIDDLE

【讨论】：

这很有帮助——作为一个还在熟悉 css 的人，这是一个 CSS-separated version

当您拥有移动版本时，这种方法会破坏外观。

【参考方案2】：

我就是这样做的，你可以试试这个：

.Parentdiv
position:relative;
width:100%;
height:100%;


.Parentdiv .childdiv
position: absolute;
top:0;
bottom:0;
margin:auto;

【参考方案3】：

我考虑删除此问题，但认为该答案可能对正在寻找可能解决方案的其他人（例如我）有用。

我想留在 Bootstrap 3 框架内……最后添加了一些 javascript 以使“标题”居中。我认为 Bootstrap 3 基本上需要 jQuery 来实现某些功能，所以没关系。

现在，我确信可能有更好的方法，但我不喜欢其他解决方案。感谢所有试图让我走上正确道路的人。

HTML

<div class="row page-header-box">
<div class="col-md-2 col-sm-2 col-xs-3 page-header-title" id="header-title">Page Title</div>
<div class="col-md-10 col-sm-10 col-xs-9 page-header-seperator" id="header-seperator">
    <div class="page-header-description"><small>Standard Text Description Standard Text Description Standard Text Description Standard Text Description Standard Text Description Standard Text Description</small></div>
    <div class="page-header-alt"><small>Additional Text Description</small></div>
</div>
</div>

CSS

.page-header-box 
background-color:#3D3D3D;
border-bottom:5px solid #b3b5b8;
margin-bottom:10px;

.page-header-title  color:#f79239;text-align:right;margin-bottom:10px; vertical-align: middle; 
.page-header-seperator  border-left:5px solid #4e2f91;margin:10px 0; 
.page-header-description  color:#febe10; 
.page-header-alt  margin-top:5px;color:#0093b2; 

JS（使用 jQuery）

var sep_height = '';
$(window).on("load resize", function(e) 
var seperatorHeight = $('#header-seperator').height();
if (seperatorHeight != sep_height) 
    sep_height = seperatorHeight;
    var titleHeight = $('#header-title').height();
    var difference = ((seperatorHeight - titleHeight) / 2) + 5;
    $('#header-title').css('margin-top', difference + 'px');

);

注意：“sep_height”只是为了不做不必要的计算，只在需要时修改标题高度。我还在上边距添加了额外的 5px 以补偿描述文本上的边距。

这是最新的 fiddle（对 onLoad 事件进行了修复）：http://jsfiddle.net/E6LcY/15/

再次感谢所有提供帮助的人。

【讨论】：

使用 JS 做格式化工作是疯狂的。在 bootstrap 3 框架中必须有更好的方法来实现这一点。

我也想要一个更好的解决方案......但是当我第一次发布查询时没有得到很多建议。我什至说“现在，我确信可能有更好的方法，但我不喜欢其他解决方案。感谢所有试图让我走上正确道路的人。” ...如果您有更好的解决方案，那么我全力以赴 :)

@Hooman 实际上有 is a better way 这不仅适用于 Twitter Bootstrap 3。如果你不关心旧的网络浏览器。

@HashemQolami 认为“更好的方法”是无用的，因为它破坏了响应功能 - 请参阅我的评论

【参考方案4】：

不知何故，我开始厌倦了某些方面的引导。有时，完成某些功能所需的黑客攻击数量并不值得您从使用它获得的所谓好处。

在这种情况下，我通过放弃引导程序并使用弹性框与应用于父级的这些属性的组合来结束归档我需要的功能：

.parent 
  display: flex;
  flex-wrap: wrap;
  align-items: center;

那些给孩子的：

.parent > div 
  display: inline-block;
  vertical-align: middle;

还有这个媒体查询：

@media all and (max-width: 500px) 
  .parent 
    /* for small screens, we use column direction rather than row */
    flex-direction: column !important;
  

涉及的html是这样的：

<div class="parent">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

例如，我将它用于响应式页脚。使用一些固定宽度和边距的组合（每个都相同），它们可以很好地对齐在其他顶部，根据屏幕的宽度，每行以不同的数量对齐，直到它足够窄以仅在一行中显示它们.

在我看来，更清晰、更简单、更简洁、更少代码、更好的响应能力、更好的布局支持、避免使用 javascript 并且没有引导的所有开销和麻烦。