垂直对齐 Bootstrap 3 列的内容

Question

在中断四年后回到网络开发之后，我很难将引导程序 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/

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

Answer 1

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

UPDATED FIDDLE

Answer 2

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

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

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

Answer 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/

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

Answer 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 并且没有引导的所有开销和麻烦。