Question

我在主页上有这个大徽标，应该与中心对齐。我设法将它水平居中，但不是垂直居中。我能想到的唯一解决方案是将最高利润率设置为20％，但似乎这对于响应式设计来说并不是一个好的解决方案。什么可能是正确的解决方案？

这是HTML：

<section id="home">
<div class="container">
<img id="logo2" class="img-responsive" src="img/logo2.png" > 
</div> <!--end container-->
</section> <!--end home-->

这是CSS：

#logo2 {
    margin: 0 auto;
    margin-top: 20%;
}

以下是主页本身的链接：http://skiest.ragne.me/。

感谢您的帮助。

Answer 1

如果你有一个声明的元素高度，你可以通过将它包装在父容器中来使用绝对定位：

＆＃13;

.parent {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  text-align: center;
  height: 100px; /* Or whatever height it is */
}

.child {
  display: inline-block;
}

＆＃13;

Answer 2

我认为你应该加入#home style＆＃34; display：table;＆＃34;和＃34;容器＆＃34; class＆＃34; display：table-cell; vertical-align：middle;＆＃34;。为了更灵活的添加＆＃34;宽度：100％;高度：100％＆＃34;到#home

Answer 3

您可以通过CSS执行此操作：

.container {
    line-height: 200px;
}

.container img {
    vertical-align: middle;
}

垂直对齐的图像

3 个答案: