css - 无法将我的 Logo 垂直居中

Question

关于 my page左上角的标志没有居中。这是我的代码:

.header_col1 {
    float: left;
    width: 20%;
    background: #009240;
    text-align: center;
    position: relative;
}
.header_col1 a {    /* my logo */
    display: inline-block;
    vertical-align: middle;
}

然而，根据我读过的文章，这种技术应该有效。为什么不在这种情况下？我不想使用绝对定位，因为 Logo 周围的绿色区域在较小的分辨率下会缩小，而 Logo 也必须这样做。

Answer 1

这是一种方法。

将 display: table-cell 应用于包装图像的 a 元素，并从 .header-col1 祖先继承宽度和高度 block 。

然后您可以使用 vertical-align: middle 和 text-align: center 来获得您想要的对齐方式。如果您需要在左右边缘留一些空白，请添加一些左右填充。

最后，为了让图像响应，设置 width: 100% 并使用 vertical-align: top 来处理下面的空白区域-基线问题。

.header_col1, .header_col2 {
  height: 110px;
}
.header_col1 {
  float: left;
  width: 20%;
  background: #009240 none repeat scroll 0% 0%;
  text-align: center;
  position: relative;
}
.header_col1 a {
  vertical-align: middle;
  display: table-cell;
  text-align: center;
  width: inherit;
  height: inherit;
  padding: 0 10px; /* optional if you need left/right whitespace */
}
.header_col1 a img {
  width: 100%;
  vertical-align: top;
}

<div class="header_col1">
  <a id="logo" href="#">
    <img src="http://placehold.it/262x78">
  </a>
</div>