如何将元素居中放置在图像标题中？

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>