Question

我有一个页脚，我想在其右侧放置一个图标。图标的宽度和高度为36像素。它位于div容器内，填充为7像素。

根据我的计算，图标应该是垂直居中的，但事实并非如此。

我希望图标在顶部，底部和右侧具有相同的填充我究竟做错了什么？

HTML：

<div data-role="header" class="pageheader"></div>
<div data-role="footer" class="pagefooter">
    <div class="info-icon">
        <a class="info-anchor" href="#" style="text-decoration: none; text-shadow: none; color: #ffffff;">
            <img class="info-img" src="https://storage.googleapis.com/material-icons/external-assets/v1/icons/svg/ic_info_outline_black_36px.svg">
        </a>
    </div>
</div>

CSS：

.info-icon {
    z-index: 200;
    position: absolute;
    padding: 7px;
    margin: 0;
    display: inline-block;
    right: 0;
    bottom: 0;
    background-color: #00ff00;
}
.info-anchor {
    background-color: #0000ff;
    padding: 0;
}
.info-img {
    background-color: #ffffff;
    margin: 0;
}
[data-role="header"], [data-role="footer"] {
    height: 50px !important;
    background-color: #ff0000 !important;
    width: 100% !important;
    border: 0 !important;
    text-align: center !important;
    text-shadow: none !important;
    color: #ffffff !important;
}
[data-role="footer"] {
    bottom: 0;
    position: absolute;
}

Answer 1

只需将display:block添加到.info-img，否则会获得额外的底部间距（图片默认为inline个元素）。您可能还想将其添加到.info-anchor，以便覆盖整个图像

Updated fiddle

Answer 2

你的图片是36x36但是.info-anchor是36x17并且正在抛弃一切。添加：

display:block;
width: 36px;
height: 36px;

到.info-anchor，它应该显示为居中。

Answer 3

您可以尝试其他方法：

将 .info-icon -class设置为与页脚相同的高度。然后只需添加以下行：

-webkit-box-sizing: border-box; /* Added for Browser-Support */
-moz-box-sizing: border-box; /* Added for Browser-Support */
box-sizing: border-box;

这允许您像在以下代码中一样移动Container中的Icon，而不扩展它：

padding-top: 5px;

这是一个更新的小提琴：http://jsfiddle.net/ey1588u5/1/

我希望我能帮到你！问候

Answer 4

.info-anchor仅渲染为36px * 17px - 如果添加

width: 36px;
height: 36px;
display:block;

对元素它正常工作

.info-icon {
  z-index: 200;
  position: absolute;
  padding: 7px;
  margin: 0;
  display: inline-block;
  right: 0;
  bottom: 0;
  background-color: #00ff00;
}
.info-anchor {
  background-color: #0000ff;
  padding: 0;
  /*New Styles Here */
  width: 36px;
  height: 36px;
  display: block;
}
.info-img {
  background-color: #ffffff;
  margin: 0;
}
[data-role="header"],
[data-role="footer"] {
  height: 50px !important;
  background-color: #ff0000 !important;
  width: 100% !important;
  border: 0 !important;
  text-align: center !important;
  text-shadow: none !important;
  color: #ffffff !important;
}
[data-role="footer"] {
  bottom: 0;
  position: absolute;
}

<div data-role="header" class="pageheader"></div>
<div data-role="footer" class="pagefooter">
  <div class="info-icon">
    <a class="info-anchor" href="#" style="text-decoration: none; text-shadow: none; color: #ffffff;">
      <img class="info-img" src="https://storage.googleapis.com/material-icons/external-assets/v1/icons/svg/ic_info_outline_black_36px.svg">
    </a>
  </div>
</div>

只需指定.info-icon元素的宽度和高度

，您也可以达到同样的效果

width:36px;
height:36px;

页脚中的图标未正确定位

4 个答案: