CSS 垂直对齐 Bootstrap 3 列的内容

Vertically align content of Bootstrap 3 column

提问by ACG

After coming back to web-development after a four year hiatus, I am having a tough time vertically aligning the contents of a bootstrap 3 column with the next column. I have tried searching this site as well as generic searches in general and have just not come up with the right solution ... or my search terms are poor.

在中断四年后回到 Web 开发领域后，我很难将引导程序 3 列的内容与下一列的内容垂直对齐。我试过搜索这个网站以及一般的通用搜索，但没有想出正确的解决方案......或者我的搜索词很差。

In the HTML/CSS below, I would like to vertically center the "Page Title" text in the left column. I would like to keep the HTML and CSS as concise as possible while using the Bootstrap 3 CSS, so I just think I am completely missing something simple.

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

HTML

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

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; }
    

Here is a jsFiddle ... http://jsfiddle.net/E6LcY/8/

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

This is one of the few times I have ever posted, so pointing me in the right direction would be great.

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

采纳答案by ACG

I considered deleting this question, but thought the answer could be useful to someone else (like me) that is looking for a possible solution.

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

I wanted to stay within the Bootstrap 3 framework ... and ended up adding some JavaScript to make the "titled" centered. I figured that Bootstrap 3 basically requires jQuery for some functionality so it was OK.

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

Now, I am sure there may be a better way, but I did not like the other solutions. Thanks to all that attempted to put me on the right paths.

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

HTML

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

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 (using jQuery)

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');
}
});

Note: the "sep_height" is just so that I don't make unnecessary calculations and only modify the title height when I need to. I am also adding an additional 5px to the top- margin to compensate for the margins on the description text.

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

Here is the latest fiddle (with a fix for the onLoad event): http://jsfiddle.net/E6LcY/15/

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

Thanks again to all those who helped.

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

回答by Pere

I'm starting to get tired of bootstrap in certain aspects somehow. Sometimes the amount of hacking required to accomplish certain functionalities is not worth the supposed benefits you get from using it.

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

In this case, I ended archiving the functionality I needed by abandoning bootstrap and using a combination of flexboxes with those properties applied to the parent:

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

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

those to the children:

那些给孩子们的：

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

and this media query:

和这个媒体查询：

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

The html involved is like this:

涉及的html是这样的：

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

I used this, for instance, for a responsive footer. Playing with a combination of some fixed width and margin (same for each), they get nicely aligned on top of the others in different quantities per row depending on the width of the screen, until it is narrow enough to just show them in one row.

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

In my opinion, much clearer, easier, cleaner and less code, with better responsiveness, better layout support, avoids using javascript and without all the overhead and hassle of bootstrap.

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

回答by Danield

Add the rule: line-height: 45px;to the col-md-2 class

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

UPDATED FIDDLE

更新的小提琴

回答by Mirage

This is how i do, you can try this:

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

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

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