无论宽度如何，图像布局灵活，居中（或固定％）？仅限CSS。里面的图片

Question

重点是CSS3图标。上图是浏览器宽度为480px时的图像。两个较低的图像是200px时的图像。右下角图像正是我想要实现的，在以下条件中进行了总结。

1. 不会对图像造成任何扭曲。 （这取消了歌剧图标上使用的方法。）
2. 图像的中心必须位于容器宽度的某个％。在图像的情况下，％恰好是50％，但它可能是其他因为我需要为它设置动画。

我只能通过将图像包裹在0宽度和高度的div中来实现右下角效果，顶部和左侧的位置为50％。然后，里面的图像位于顶部，左侧为-60px（120px是图像的宽度和高度）。

我有一种“行业标准”的方式，这样做不那么复杂吗？

另外，我在那里使用的图像是精灵，所以我不知道这是否会使它变得更复杂。图像已被div标签包裹，溢出：隐藏以隐藏其他精灵。

Answer 1

您不必使用容器。假设你的CSS3图标有class="css3icon"。只需使用：

.css3icon{
    left:50%;
    margin-left:-60px; /* (half the width of the icon) */
    display:block; /* You should already have this one.. */
}

这是一个精灵这个事实没有什么区别......

您也可以使用：margin: 0 auto;但是如果您想制作动画，我建议您使用第一个解决方案。

Answer 2

如果我理解你在问什么，你想要一个响应中心的图像。我认为这不会起作用，因为你正在使用一个精灵，但这就是我为普通图像所做的事情：

//to center the image
#container {
    //the width can be different but then you'll have to center the container
    width:100%; 
    text-align:center;
}

#container img {
    display:inline-block;
    //following code makes image resize with browser
    max-width:100%;
    //set this to the smallest size you want to the image to display
    min-width:150px; 
}