Html 引导中的垂直对齐元素 我创建了一个像App Store页面的小站点，并且不能对齐div游戏中的所有元素。 <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>

一,

国王帝国 Скачать

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

---

实例-

实现这一点有多种方法

这里有一个简单的方法：

将此添加到css中

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

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

更多的方法是在
.game dark.col-lg-12.col-md-12.col-sm-12.col-xs-12
上第一次设置
线条高度
到
98px
，并从图像中删除
显示：块
样式。这将对齐除倒数第二个div之外的所有内容。使用
h2
将上下页边距设置为0，并将
行高设置为
98px
除图像-最大高度：100px；-也许是线高？不管怎样，这对形象不起作用。