将图标水平对齐到宽度因CSS而异的图像？

Question

我有一个尺寸不一的图像和一个图标。我想将图标水平对齐图像，如下所示：

更新

添加一个jsfiddle示例：http://jsfiddle.net/p20qj06u/。我用<div class="icon">icon</div>替换了图标。我必须将图像保持在这个位置（向右浮动），然后将“图标”放在图像的中间。

Answer 1

1. 根据要求，您可以在一个容器中添加两个图像 可以致电.img-wrapper

2. 将clear:both;应用于整个容器.img-wrapper     float: right。

3. 然后在图标display:block;上margin:0 auto;
   
   

DEMO http://jsfiddle.net/a_incarnati/p20qj06u/2/

           .container .img-wrapper {
                float: right;
            }
            .icon{
                clear:both; 
                display:block; 
                margin:0 auto;
            }

.container .img-wrapper {
    float: right;
}
.icon{
    clear:both; 
    display:block; 
    margin:0 auto;
}

<div class="container">
    <div class="img-wrapper"><img  src="http://7xi5mk.com1.z0.glb.clouddn.com/FivlNV1GzShuj6lGpdCNip_6BYP8" alt="" />
        <img class="icon" src="http://placehold.it/20x20" alt="" />
</div>

Answer 2

您应该可以使用

将图标居中

text-align: center;

除非包含的元素未设置为

display: block;

如果这还没有解决，我建议提供一个示例的片段，以便我们可以清楚地看到问题以及如何解决它：）

Answer 3

创建一个div作为容器。中心内容，设置容器宽度（％或px）。

更新：（浮动：左;）https://jsfiddle.net/sa1axf46/2/

HTML

<div class="container">
    <img src="#" alt="img">
    <div class="icon">ico</div>
</div>

CSS

.container {
    text-align: center;
}
.container img {
    float: left;
    width: 100%;
}
.container .icon {
    width: 100%;
}

Answer 4

将图标放在图像的div中，并将图标边距设置为自动。

<div class="image">
<div class="icon"></div>
</div>

.icon {
Left:0;
Right:0;
Margin-left:auto;
Margin-right:auto;
}