Wie können Elemente innerhalb einer Bildbeschriftung zentriert werden?

Question

Ich habe ein Bild mit einer Bildunterschrift, die Text und ein anderes kleineres Bild enthält. Momentan werden sie zusammen musiziert und ich möchte sie getrennt haben. Ich habe versucht, eine innere div für den Text und eine separate für das Bild, aber es funktioniert nicht und bricht die Bildunterschrift (macht zwei Bildunterschriften einander überlappen). Wie man Elemente innerhalb einer Bildunterschrift zentriert?

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

Ich versuche, diesen Look zu erzielen:

Answer 1

versuchen this!

#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

Sie unbedingt das Bild innerhalb von h2 positionieren kann:

#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

assign float: left; (oder display: inline-block;) an den #gallery-img Behälter innerhalb dieses Behälters auf die Größe des Bildes enthalten. Weisen Sie display: block; dem img zu, so dass kein zusätzlicher Leerraum zum Erstellen des Layouts auf der Seite verwendet wird. Verwenden Sie dann right: 0; anstelle von width: 100%; auf #caption div, damit es aufgrund des Boxmodells nicht über die Grenzen von #gallery-img hinausgeht. Position #caption unbedingt so positionieren, dass bei der Positionierung die Ränder berücksichtigt werden, anstatt die div innerhalb von #caption absolut zu positionieren. Ist das was du willst?

#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

Haben Sie darüber nachgedacht, das Hauptbild als Hintergrundbild verwenden? Dies würde den Code erheblich vereinfachen. Sie können dann die Kopie und das sekundäre Bild in separaten Divs platzieren und sie links und rechts innerhalb eines anderen Containers mit dem Rand auf 0 auto zentrieren, um zu zentrieren. Beispielcode unten.

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