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

Question

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

1. 没有任何图像失真。（这使歌剧图标上使用的方法不合格。）
2. 图像的中心必须在容器宽度的某个百分比处。在图像的情况下，那个 % 正好是 50%，但它可能是其他的，因为我需要对其进行动画处理。

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

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

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

Answer 1

You don't have to use a container. let's say your CSS3 icon has class="css3icon". simply use:

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

The fact that this is a sprite doesn't make a difference..

You can also use: margin: 0 auto; however if you want to animate I recommend going with the first solution.

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