如何將包含絕對元素的圖像居中？

我已經設法定位圖像中的絕對元素，但現在我想將圖像置於紅色容器內部......怎麼樣？

例如：

enter image description here

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

來源

2014-03-13 Marco

你能做到這一點

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

來源

2014-03-13 00:35:37 CRABOLO

如果我使用你的答案，圖像容器內的絕對元素位於外部，所以它不會工作 – Marco

我做了..並嘗試它，它不工作...圖像容器內的元素是外部，他們需要在裏面，看看我的圖像 – Marco

這裏是（第一次使用jsfiddle）http://jsfiddle.net/uLX8g/2/ – Marco

OK，一兩個小時，我已經找到了解決辦法之後...我怎麼能錯過呢！

的解決方案是從這個其他職位 https://stackoverflow.com/a/4980600/888139

它說：如果你有DIV文本對齊：中心;，然後它裏面的任何文本將相對於居中的寬度那個容器元素。內聯塊元素被視爲文本用於此目的，因此它們也將居中。

所以，我只需要使用ID爲的圖像 text-align center ...就這些了。

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

來源

2014-03-13 02:30:44 Marco

-2

我不想讓它變得複雜或不管。但試試這個，看看它是否有效。

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

這是以防萬一，你需要把一切的中心。 :)

來源

2014-03-13 05:03:07 user3335903

使用HTML5不支持的標籤的不好主意... – Marco

如何將包含絕對元素的圖像居中？

回答

相關問題