引导程序中的垂直对齐元素答案

【问题标题】：Vertical aligment elements in bootstrap引导程序中的垂直对齐元素
【发布时间】：2013-11-11 13:03:29
【问题描述】：

我正在创建一个类似于应用商店页面的小网站，并且无法对齐 div .game-dark 中间的所有元素

<div class="row">
<div class="game-dark col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
        <div class="number col-lg-1 col-md-1 col-sm-1 col-xs-1">
        <p>1</p>
        </div>
        <div class="col-lg-1 col-md-1 col-sm-2 col-xs-2">
        <img src="img/kings-empire.png" alt="Kings Empire" title="Kings Empire" class="thumb img-responsive">
        </div>
        <div class="col-lg-8 col-md-8 col-sm-7 col-xs-5">
        <h2 class="game-name">Kings Empire</h2>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-3">
            <button type="button" class="btn btn-default">Скачать</button>
        </div>

</div>

在我的情况下，如何垂直对齐中间的所有元素？

现场示例 - here

【问题讨论】：

标签： html css twitter-bootstrap alignment vertical-alignment

【解决方案1】：

有多种方法可以实现这一点。

这里有一个简单的方法：

将此添加到您的 CSS

.game-dark {
  line-height: 100px;
}

<p> 没有边距

.number p {
  margin: 0;
}

为 img 设置最大高度

.img-responsive {
  min-height: 45px;
  min-width: 45px;
  max-height: 100px;
}

删除h2的边距/填充

h2.game-name {
  margin:0;
  padding: 0;
  line-height: 100px
}

【讨论】：

所有固定，除了图片 - 最大高度：100px； - 也许行高？无论如何不适用于图像。

【解决方案2】：

首先将.game-dark.col-lg-12.col-md-12.col-sm-12.col-xs-12 上的line-height 设置为98px，然后从图像中删除display: block 样式。这将对齐除倒数第二个 div 之外的所有内容。使用h2 将顶部和底部边距设置为0，并将line-height 设置为98px。

【讨论】：