垂直对齐的图像

Question

我在主页上有这个大徽标，应该居中对齐。我设法将它水平居中，但不是垂直居中。我能想到的唯一解决方案是将 top-margin 设置为 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%;
}

这是主页本身的 link：http://skiest.ragne.me/。

感谢您的帮助。

Answer 1

我认为你应该添加到#home style "display:table;" 和 "container" class "display:table-cell;vertical-align:middle;"。为了更灵活，将 "width:100%;height:100%" 添加到 #home

Answer 2

您可以通过 CSS:

.container {
    line-height: 200px;
}

.container img {
    vertical-align: middle;
}

Answer 3

如果您为元素声明了高度，则可以通过将其包装在父容器中对其使用绝对定位：

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

垂直对齐的图像

Vertically aligned image

html

css

alignment

twitter-bootstrap