Html 页脚中的图标未正确定位

我有一个页脚，我想在里面的右边放置一个图标。图标的宽度和高度为36像素。它位于一个填充为7像素的

div

容器中

根据我的计算，图标应该垂直居中，但不是

我希望图标的顶部、底部和右侧具有相同的填充。
我做错了什么

HTML:

---

您的图像是36x36，但是

.info-anchor

是36x17，并且正在丢弃所有内容。加：

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

---

到.info锚点，它应该居中显示。

只需将

显示：block

添加到

.info img

中，否则它会获得额外的底部间距（默认情况下，图像是

内联的
元素）。您可能还希望将其添加到
.info anchor
，以便覆盖整个图像

您可以尝试另一种方法：

为.info图标类指定与页脚相同的高度。
然后只需添加以下行：

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

这允许您像在以下代码中一样移动容器中的图标，而无需展开它：

padding-top: 5px;

这里是一个更新的小提琴：

我希望我能帮助你！
问候语
。信息锚
仅以36px*17px的速度渲染-如果添加

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

对于元素，它可以正常工作


.info图标{
z指数：200；
位置：绝对位置；
填充：7px；
保证金：0；
显示：内联块；
右：0；
底部：0；
背景色：#00ff00；
}
.info主播{
背景色：#0000ff；
填充：0；
/*这里有新款式*/
宽度：36px；
高度：36px；
显示：块；
}
.info img{
背景色：#ffffff；
保证金：0；
}
[data role=“header”]，
[数据角色=“页脚”]{
高度：50px！重要；
背景色：#ff0000！重要；
宽度：100%！重要；
边界：0！重要；
文本对齐：居中！重要；
文本阴影：无！重要；
颜色：#ffffff！重要；
}
[数据角色=“页脚”]{
底部：0；
位置：绝对位置；
}


padding-top: 5px;

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