13

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.

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 

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

Here is a 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.

4

4 回答 4

9

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

我想留在 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/

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

于 2013-09-09T10:17:34.800 回答
0

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

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

.Parentdiv .childdiv{
position: absolute;
top:0;
bottom:0;
margin:auto;
}
于 2013-09-08T12:37:28.237 回答
0

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

在这种情况下，我通过放弃 bootstrap 并使用 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 并且没有引导的所有开销和麻烦。

于 2015-02-17T15:28:11.203 回答
0

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

更新的小提琴

于 2013-09-08T09:29:58.383 回答