如何将包含绝对元素的图像居中？

Question

如何将包含绝对元素的图像居中？

我已经设法在图像中定位绝对元素，但现在我想将图像置于de red容器中...如何？

例如：

HTML

<div id="image">
    <div id="the-image">
        <img src="..." width="..." height="..." alt="">
        <a href="..."><img src="" alt=""></a>
    </div>
</div>

CSS

#image {background-color: red; float: left; width: 660px;}

#the-image {display: inline-block; position: relative;}
#the-image img {}
#the-image a {position: absolute; bottom: 10px; right: 10px;}

Answer 1

你可以这样做

#the-image {
    text-align: center;
    display: block;
}

#the-image img {
    display: inline-block;
}

或者

#the-image img {
    display: block;
    margin: 0 auto;
}

要使其正常工作，您需要确保您的图片设置了宽度属性。

---

编辑：

http://jsfiddle.net/uLX8g/3/

#the-image {
 display: block; /* changed from inline-block to block */
}

#the-image img { 
    display: block; 
    margin: 0 auto;
}

Answer 2

好吧，经过几个小时，我找到了解决方案......我怎么能错过它呢？

解决方案来自另一篇文章 https://stackoverflow.com/a/4980600/888139

它说： 如果你有一个带有text-align：center;的 div ，那么其中的任何文本都将相对于该容器元素的宽度居中。为此目的，内联块元素被视为文本，因此它们也将居中。

所以，我只需要使用id 图像文本对齐中心制作div ...以及所有这些。

<div id="image">
    <div id="the-image">
        <img src="..." width="..." height="..." alt="">
        <a href="..."><img src="" alt=""></a>
    </div>
</div>



#image {background-color: red; float: left; width: 660px; text-align: center}

#the-image {display: inline-block; position: relative;}
#the-image img {}
#the-image a {position: absolute; bottom: 10px; right: 10px;}

Answer 3

我不想让它变得复杂或其他什么。但试试这个，看它是否有效。

<div id="image">
   <center>
      <div id="the-image">
           <img src="image.jpg" width="..." height="..." alt="">
            <a href="..."/><img src="" alt=""></a>
         </div>
     </center>
 </div>

这是为了防止您需要将所有内容置于中心位置。 ：）