单个IMG以DIV多次居中，外部DIV与右侧对齐

我对CSS相当陌生，虽然我找到了一个IMG在DIV中居中的例子，因为我在外部DIV上有一个float: right;，但它没有按我的意愿工作。这基本上使得DIV出现在正确的位置，但IMG不是中心。单个IMG以DIV多次居中，外部DIV与右侧对齐

这里是一个CSSDesk链接，我的情况的一个例子：http://www.cssdesk.com/2pgBf

我试图让绿色共享图标出现外红框（资料核实）中居中垂直和水平。

我敢肯定有很多改进的，可以到我的CSS进行，但请只给我解决问题的方案（尽管随意对这个职位有技巧CSS评论）回答。

希望是有道理....

来源

2014-02-27 neildeadman

您是否试过'padding-top'为绿色共享图标？ – TylerH

请将您的HTML/CSS添加到您的帖子。 –

@TylerH我曾经想到过，但不确定那是最好的方式。 – neildeadman

你可以做position: relative;父，然后：

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

在孩子，这将居中。

DEMO HERE

来源

2014-02-27 15:40:02 Ruddy

这是个不错的选择。 –

这会工作得很好，没有必要的定位。

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

来源

2014-02-27 15:44:21

这是一个非常好的回应，但我用Ruddy的标记作为回答......谢谢！ – neildeadman

，当我需要做这种代码，我设置父标签，在这种情况下，DIV到的位置是：相对的，而图像的位置是：绝对的，最高：50％，左：50％和余量：一半的维度只是在您的代码中执行此操作：

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

来源

2014-02-27 15:46:26 rcmonteiro

单个IMG以DIV多次居中，外部DIV与右侧对齐

回答

相关问题