如何將元素居中放置在圖像標題中？

Question

我有一個帶有圖像標題的圖像，其中包含文本和另一個較小的圖像。 目前，它們被靜音在一起，我希望它們分開。 我嘗試為文本放置一個內部div，為圖像放置一個單獨的div，但是它不起作用並破壞了圖像標題（使兩個圖像標題彼此重疊）。 如何將元素居中放置在圖像標題中？

 #gallery-img { position: relative; } #caption div { position: absolute; left: 0; bottom: 0; width: 100%; color: #fff; background: rgb(0, 0, 0); /* fallback color */ background: rgba(0, 0, 0, 0.7); padding: 10px; text-align: center; } 

 <div id="gallery-img"> <img src="http://www.umnet.com/pic/diy/screensaver/10/4a206b7a-8ee2.jpg" alt="demo"> <h2 id="caption"><div><b>Stats:</b> Advanced Mathematics<br/><a href="#">See more</a><img style="width:10%;" src="http://images.clipartpanda.com/circle-clipart-pink-circle-clip-art-at-vector-clip-art-2.png"></div></h2> </div> 

我正在嘗試實現以下外觀：

Answer 1

嘗試這個！

 #gallery-img img { float:right; width:7%; } #gallery-img { color: #fff; background: rgb(0, 0, 0); /* fallback color */ background: rgba(0, 0, 0, 0.7); padding: 10px; text-align: center; } 

 <div id="gallery-img"> <img src="http://images.clipartpanda.com/circle-clipart-pink-circle-clip-art-at-vector-clip-art-2.png"> <div id="caption"><b>Stats:</b> Advanced Mathematics<br/><a href="#">See more</a></div> </div> 

Answer 2

您可以將圖像絕對定位在h2 ：

 #gallery-img { position: relative; } #caption div { position: absolute; left: 0; bottom: 0; width: 100%; color: #fff; background: rgb(0, 0, 0); /* fallback color */ background: rgba(0, 0, 0, 0.7); padding: 10px; text-align: center; } #caption img{ position: absolute; right: 20px; bottom: 10px; } 

 <div id="gallery-img"> <img src="http://www.umnet.com/pic/diy/screensaver/10/4a206b7a-8ee2.jpg" alt="demo"> <h2 id="caption"><div><b>Stats:</b> Advanced Mathematics<br/><a href="#">See more</a><img style="width:10%;" src="http://images.clipartpanda.com/circle-clipart-pink-circle-clip-art-at-vector-clip-art-2.png"></div></h2> </div> 

Answer 3

分配float: left; （或display: inline-block; ）到#gallery-img容器，以將該容器包含在其中的圖像大小內。 分配display: block; 到img這樣它就不會使用額外的空白來在頁面上創建布局，然后使用right: 0; 而不是width: 100%; 在#caption div因此不會由於框模型而超出#gallery-img的范圍。 另外，絕對定位#caption以便在定位時考慮其邊距，而不是將div絕對定位在#caption 。 這是你要去的嗎？

 #gallery-img { position: relative; float: left; } #gallery-img img { display: block; } #caption { position: absolute; left: 0; bottom: 0; right: 0; color: #fff; background: rgb(0, 0, 0); /* fallback color */ background: rgba(0, 0, 0, 0.7); padding: 10px; text-align: center; } 

 <div id="gallery-img"> <img src="http://www.umnet.com/pic/diy/screensaver/10/4a206b7a-8ee2.jpg" alt="demo"> <h2 id="caption"><div><b>Stats:</b> Advanced Mathematics<br/><a href="#">See more</a><img style="width:10%;" src="http://images.clipartpanda.com/circle-clipart-pink-circle-clip-art-at-vector-clip-art-2.png"></div></h2> </div> 

Answer 4

 figure { display: flex; align-items: flex-start; } figcaption { text-align: center; } img { width: 10%; } 

 <figure> <figcaption><b>Stats:</b> Advanced Mathematics<br><a href="#">See more</a></figcaption> <img src="http://images.clipartpanda.com/circle-clipart-pink-circle-clip-art-at-vector-clip-art-2.png"> </figure> 

Answer 5

您是否考慮過將主圖像用作背景圖像？ 這將大大簡化代碼。 然后，您可以將副本和輔助圖像放置在單獨的div中，並將它們左右浮動在另一個容器中，其邊距設置為0 auto以便居中。 下面的示例代碼。

 #gallery-img { position: relative; background: url('http://www.umnet.com/pic/diy/screensaver/10/4a206b7a-8ee2.jpg'); width:640px; height:640px; } #caption { position:absolute; bottom:0; width: 100%; color: #fff; background: rgb(0, 0, 0); padding:15px 0; /* fallback color */ background: rgba(0, 0, 0, 0.7); text-align: center; } #container { width:400px; margin:0 auto; } #copy { float:left; width:340px; } #image-container { float:right; width:40px; } h2 { margin: 0 } 

 <div id="gallery-img"> <div id="caption"> <div id="container"> <div id="copy"> <h2> <b>Stats:</b> Advanced Mathematics<br/> <a href="#">See more</a> </h2> </div> <div id="image-container"> <img style="width:100%;" src="http://images.clipartpanda.com/circle-clipart-pink-circle-clip-art-at-vector-clip-art-2.png"> </div> </div> </div> </div>