イメージキャプションの中央に要素を配置する方法は？

Question

私は、テキストとそれの中にもう一つの小さなイメージを持つイメージキャプションを持つイメージを持っています。現在、彼らは一緒に夢中になり、私はそれらを別々にしたい。私はテキストのための内側のdivと画像のための別のものを入れてみましたが、それは動作しませんし、画像のキャプションを破る（2つの画像のキャプションを互いに重複させる）。イメージキャプションの中に要素を配置する方法は？

#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

内の画像の大きさに、そのコンテナを含むこと#gallery-img容器にfloat: left;（又はdisplay: inline-block;）を割り当てます。 をimgに割り当ててください。したがって、ページ上にレイアウトを作成するために余白を使用しないで、width: 100%;の代わりに#caption divにright: 0;を使用して、ボックスモデルのために#gallery-imgの境界を超えて押し込まないようにしてください。また、#captionの位置を絶対的に#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に設定した別のコンテナの内側と中央に中央に配置することができます。以下のサンプルコード。

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