Question

我创建了一个类似于应用程序商店页面的小网站，并且无法在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

Answer 1

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

这里有一个简单的方法：

将此添加到您的css

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

<p>

上没有保证金

.number p {
  margin: 0;
}

将max-height设置为img

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

删除h2

的边距/填充

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

此处有更多方法http://www.vanseodesign.com/css/vertical-centering/

Answer 2

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

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

2 个答案: