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

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

Answer 1

这是一种方法。

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

然后，您可以使用vertical-align: middle和text-align: center来获得所需的对齐方式。如果左边和右边需要一些空白区域，请添加一些左右边距。

最后，要让图片响应，请设置width: 100%并使用vertical-align: top来处理基线以下的空白区域。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

使用显示表魔术： - ）

 .header_col1 {
   display:table;

}
.header_col1 a {    /* my logo */
    display: table-cell;
    vertical-align: middle;
}

Answer 3

我会以变换为中心。

.header_col1 a {    /* my logo */
    display: inline-block;
    vertical-align: middle;
    position: relative;
    padding: .5em;
    top: 50%;
    transform: translateY(-50%);
}

编辑：当容器开始收缩时，添加padding: .5em;以在较小的屏幕上为徽标提供一些喘息空间。

Answer 4

您需要将行高设置为.header_col1的高度，以使此技术正常工作：

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

...而且img需要是一个块元素：

.header_col1 a img {
    display: block;
}

编辑： 添加此项以保留灵活的大小：

.header_col1 a {
    width: 100%;
}
.header_col1 a img {
    max-width: 100%;
}

Answer 5

新的热情就是这样;

.header_col1 {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;

}
.header_col1 a {    /* my logo */
    margin: auto;
}

注意：随着时间的推移，供应商前缀-webkit- -moz- ms-将不再适用。

这是一个示例：https://jsfiddle.net/w4m50ybd/1/

奖励：将图像调整大小调整到容器是一个不同的问题..然而，在最简单的情况下，答案是width: 100%; height: auto;。

Answer 6

试试这个

.header_col1:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}

.header_col1 a {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
}

Codepen Demo

Answer 7

我已将line-height添加到锚标记。

enter image description here

  header_col1 a {
  display: inline-block;
  vertical-align: middle;
  line-height: 10;
}

Answer 8

您可以使用表格显示垂直和水平对齐标签。这种方式是对齐元素的最简单方法。我在你的页面上进行了测试，它运行得很好。

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

或另一种方法是使用填充来使元素居中。

.header_col1 a {
  padding: 16px 0px;
}

为了避免在其他设备和屏幕分辨率下更改导航尺寸时出现其他问题，我推荐第一个解决方案。

无法垂直居中我的徽标

8 个答案: