Text über Bilder zentrieren

Question

Ich habe eine Frage: Wie kann ich den Text über dem entsprechenden Bild zentrieren?

#container { 
 
    text-align: center; 
 
} 
 

 
.text { 
 
    display: inline-block; 
 
    margin: 0 20px 0 20px; 
 
} 
 

 
.img { 
 
    margin: 0 20px 0 20px; 
 
    width: 50px; 
 
    height: 50px; 
 
}

<div id="container"> 
 
    <div class="text">100</div> 
 
    <div class="text">500</div> 
 
    <div class="text">1000</div> 
 
    <br> 
 
    <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif" class="img"> 
 
    <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif" class="img"> 
 
    <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif" class="img"> 
 
</div>

Ich habe eine Menge von Möglichkeiten versucht, aber ich konnte nicht eine gute Wirkung bekommen.

Wie es aussehen soll:

Answer 1

Die einfachste und wahrscheinlich sicherste Weg ist es, das img & Text in einem div zu packen:

<div id="container"> 
    <div class="txtimg"> 
     100 
     <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif"> 
    </div> 
    <div class="txtimg"> 
     500 
     <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif"> 
    </div> 
    <div class="txtimg"> 
     1000 
     <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif"> 
    </div> 
</div> 

und CSS:

.txtimg{ 
    display: inline-block; 
    text-align: center; 
} 
.txtimg > img{ 
    display: block; 
} 

Auf diese Weise können Sie an Ihre img schweben oder positionieren/txt Combo wie du willst.

Answer 2

Make Text gleiche Breite wie Bild

.text { 
    width: 50px; 
} 

JSFiddle Demo: https://jsfiddle.net/L3gcy3ek/1/

Answer 3

können Sie den <figure> und <figcaption>-Tag verwenden:

#container { 
 
    text-align: center; 
 
} 
 

 
.text { 
 
    display: inline-block; 
 
    margin: 0 20px 0 20px; 
 
} 
 

 
.img { 
 
    margin: 0 20px 0 20px; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 

 
figure { 
 
    width: 25%; 
 
    float: left; 
 
    margin: 0; 
 
    text-align: center; 
 
    padding: 0; 
 
}

<figure><figcaption>100</figcaption> 
 
    <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif" class="img"> 
 
    </figure> 
 
    <figure><figcaption>500</figcaption> 
 
    <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif" class="img"> 
 
    </figure> 
 
    <figure><figcaption>1000</figcaption> 
 
    <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif" class="img"> 
 
    </figure>

Diese Zentren automatisch den Text. Sie müssen mit dem CSS-Code figure{} spielen, um die Bilder richtig an der gewünschten Stelle auf Ihrer Seite auszurichten.

Hoffe es hilft!

Answer 4

Ein Ansatz in modernen Browsern ist CSS Flexbox Layout zu verwenden:

#container { 
 
    /* displays the element, and its contents, according 
 
    to the flexbox layout: */ 
 
    display: flex; 
 

 
    /* allows content to wrap to a new line: */ 
 
    flex-wrap: wrap; 
 

 
    /* aligns the first and last elements of each 'row' 
 
    to the left and right sides of the element 
 
    and allows space between the elements that fall 
 
    between the first and last: */ 
 
    justify-content: space-between; 
 
} 
 

 
#container div.text, 
 
#container img.img { 
 

 
    /* setting the elements to align themselves 
 
    to the center of their available 'box': */ 
 
    align-self: center; 
 
    text-align: center; 
 
    width: 30%; 
 
}

<div id="container"> 
 
    <div class="text">100 adding some extraneous and irrelevant text to try and ensure that the text exceeds the width of the &lt;img&gt; below...</div> 
 
    <div class="text">500</div> 
 
    <div class="text">1000</div> 
 
    <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif" class="img"> 
 
    <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif" class="img"> 
 
    <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif" class="img"> 
 
</div>

Oder alternativ aber auch in modernen Browsern, Layout mit CSS Grid:

#container { 
 

 
    /* displays the element and its contents using 
 
    the CSS grid layout: */ 
 
    display: grid; 
 

 
    /* defines three columns each of which takes 
 
    one fractional unit of the available space: */ 
 
    grid-template-columns: repeat(1fr, 3); 
 

 
    /* defines two rows each of which is set to 
 
    'min-content', which allow the contained 
 
    elements to take the vertical space they 
 
    require: */ 
 
    grid-template-rows: repeat(min-content, 2); 
 
    margin: 0 auto; 
 
} 
 

 
div.text, 
 
img.img { 
 

 
    /* to allow for a small 'gutter' between 
 
    columns: */ 
 
    max-width: 90%; 
 
    text-align: center; 
 
} 
 

 
div.text { 
 

 
    /* assigning the matched elements to 
 
    the first row, allowing the brwoser 
 
    to place the elements in the correct 
 
    grid box according to the order in 
 
    the DOM: */ 
 
    grid-row: 1; 
 
} 
 

 
img.img { 
 
    grid-row: 2; 
 
}

<div id="container"> 
 
    <div class="text">100</div> 
 
    <div class="text">500</div> 
 
    <div class="text">1000</div> 
 
    <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif" class="img"> 
 
    <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif" class="img"> 
 
    <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif" class="img"> 
 
</div>

Referenzen:

• CSS flexbox compatibility.
• CSS grid compatibility.

Answer 5

Dies ist, was ich tun würde:

.image { 
    position:relative; 
} 

.text { 
    position:absolute; 
    text-align:center; 
}