单个 IMG 在 DIV 中居中多次在外部 DIV 中向右对齐

Question

我对CSS相当陌生，虽然我找到了在DIV中将IMG居中的示例，但由于我在外部DIV上有一个float: right;，它不能按我想要的方式工作。这基本上使DIV出现在正确的位置，但IMG不是中心。

下面是我的方案示例的 CSSDesk 链接：http://www.cssdesk.com/2pgBf

我正在尝试让绿色共享图标在外部红色框 （DIV） 中垂直和水平居中显示。

我确信可以对我的 CSS 进行很多增强，但请只回答我的问题的解决方案（尽管请随时通过 CSS 提示对这篇文章发表评论）。

希望这是有道理的。

Answer 1

您可以在父级上执行position: relative;，然后：

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

在孩子身上，这将以它为中心。

在这里演示

Answer 2

这也同样有效，无需定位。

JSFiddle Demo

.social-media-icon {
    background: Red;
    margin: 2px;
    float: right;
    display: inline;
    position: relative;
}
.social-media-icon a {
    display: block;
}
.social-media-icon a img {
    width: 16px;
    height: 16px;
    display: block;
    margin:5px;
}

Answer 3

当我需要执行这种代码时，我会设置父标记，在这种情况下，DIV 定位：相对，图像定位：绝对，顶部：50%，左侧：50% 和边距：尺寸的一半 只需在您的代码中执行此操作：

.social-media-icon{
    position:relative;
}
.social-media-icon a img{
    position:absolute;
    top:50%;
    left:50%;
    margin: -8px 0 0 -8px;
}