Question

经过四年的中断后回到网络开发之后，我很难将bootstrap 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 {
        background-color:#3D3D3D;
        border-bottom:5px solid #b3b5b8;
        margin-bottom: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 { color:#febe10; }
    .page-header-alt { margin-top:5px;color:#0093b2; }

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

这是我发布过的少数几次之一，所以指向正确的方向会很棒。

Answer 1

我考虑过删除这个问题，但认为答案可能对寻找可能解决方案的其他人（比如我）有用。

我想留在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，以补偿描述文本中的边距。

这是最新的小提琴（修复了onLoad事件）：http://jsfiddle.net/E6LcY/15/

再次感谢所有帮助过的人。

Answer 2

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

<强> UPDATED FIDDLE

Answer 3

这是我的方式，你可以试试这个：

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

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

Answer 4

我开始厌倦某些方面的引导程序。有时，完成某些功能所需的黑客数量并不值得您使用它所带来的假设好处。

在这种情况下，我通过放弃引导程序并使用Flexbox的组合以及应用于父项的属性来结束归档所需的功能：

.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，没有引导程序的所有开销和麻烦。

垂直对齐Bootstrap 3列的内容

4 个答案: