0

我正在创建一个像应用商店页面这样的小网站，并且无法对齐 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>

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

活生生的例子 -这里

4

2 回答 2

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
}

更多方法在这里http://www.vanseodesign.com/css/vertical-centering/

于 2013-10-31T13:47:30.590 回答
1

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

于 2013-10-31T13:49:09.073 回答