Question

我有一张带有图片标题的图片，其中包含文字和另一张较小的图片。目前他们在一起，我希望他们分开。我尝试为文本设置一个内部div，为图像设置一个单独的div，但它不起作用并打破图像标题（使两个图像标题相互重叠）。如何将元素置于图像标题的中心？

＆＃13;

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

＆＃13;

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

＆＃13;

我试图实现这个目标：

Answer 1

试试这个！

＆＃13;

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

＆＃13;

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

＆＃13;

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，以便它不会在页面上使用额外的空格来创建布局，然后在{{1}上使用right: 0;代替width: 100%;因此，由于盒子模型，它不会超出#caption div的范围。此外，绝对定位#gallery-img，以便在定位中考虑其边距，而不是将#caption绝对定位在div内。这是你要去的吗？

＆＃13;

#caption

＆＃13;

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

＆＃13;

Answer 4

＆＃13;

RichTextBox

＆＃13;

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

＆＃13;

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>

如何将元素置于图像标题的中心？

5 个答案: