Text auf dem Bild mit CSS und HTML nur

Question

Ich versuche, verschiedene Texte in der Bildmitte hinzuzufügen. Sieht so aus, als ob ich das nicht kann und brauche Hilfe bei der Aufgabe.

Also, ich habe 4 Bilder auf der Seite. Jetzt möchte ich Text auf die Bilder setzen. Was ich bisher habe, sind 4 Bilder auf der Seite, aber der Text wird nicht richtig angezeigt. Hier ist der Teil des HTML-

.images { 
 
    text-align: center; 
 
    padding: 15px 15px; 
 
    position: relative; 
 
    vertical-align: middle; 
 
    display: inline; 
 
    width: 430px; 
 
    margin: 10px 0; 
 
} 
 
#img-row { 
 
    display: block; 
 
    margin-top: -15px; 
 
    position: relative; 
 
    height: auto; 
 
    max-width: auto; 
 
    overflow-y: hidden; 
 
    overflow-x: auto; 
 
    word-wrap: normal; 
 
    white-space: nowrap; 
 
    text-align: center; 
 
} 
 
#img-row:after { 
 
    content: ""; 
 
    position: absolute; 
 
    display: block; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 1; 
 
} 
 
.class { 
 
    position: relative; 
 
} 
 
.button { 
 
    display: block; 
 
    background-color: #bbb; 
 
    margin: 10px; 
 
    padding: 10px; 
 
} 
 
button.button { 
 
    width: 570px; 
 
    margin-left: 182px; 
 
    height: 40px; 
 
    font-size: 30px; 
 
} 
 
.caption-text { 
 
    display: block; 
 
    position: absolute; 
 
    width: 100%; 
 
    color: green; 
 
    left: 0; 
 
    bottom: 50%; 
 
    padding: 1em; 
 
    font-weight: 700; 
 
    z-index: 2; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
}

<div id="img-row"> 
 
    <a href=""> 
 
    <button class="button"> 
 
     Button 
 
    </button> 
 
    </a> 
 
</div> 
 
<div id="img-row"> 
 

 
    <a href=""> 
 
    <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg" class="images" /> 
 
    <figcaption class="caption-text">This is a caption text</figcaption> 
 
    </a> 
 
    <a href=""> 
 
    <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg" class="images" /> 
 
    <figcaption class="caption-text">This is a caption text</figcaption> 
 
    </a> 
 

 
</div> 
 
<div id="img-row"> 
 
    <a href=""> 
 
    <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg" class="images" /> 
 
    <figcaption class="caption-text">This is a caption text</figcaption> 
 
    </a> 
 
    <a href=""> 
 
    <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg" class="images" /> 
 
    <figcaption class="caption-text">This is a caption text</figcaption> 
 
    </a> 
 
</div>

Dies ist, wie es wie bisher aussieht: JSFIDDLE. Text erscheint nur zwei Mal.

Answer 1

Da Sie Ihre Bilder in einem a Tag verschachtelt haben, wurde der Text left:0 von img-row ausgerichtet. Nun richtet sie richtig mit dem Bild, weil ich hinzugefügt:

#img-row > a { 
    position: relative; 
} 

Betrachten Sie das folgende Beispiel:

#a2{ 
 
    position: relative; 
 
    display: block; 
 
} 
 

 
p{ 
 
    position: absolute; 
 
    top: 0px; 
 
    margin: 0; 
 
}

<a id="a1"><p>hello1</p></a> 
 
<a id="a2"><p>hello2</p></a>

absolute verhält sich wie fixed außer in Bezug auf die nächsten positioniert Vorfahren anstelle von relativ in das Ansichtsfenster. Wenn ein absolut positionierten Element keine positionierten Vorfahren hat, verwendet er das Dokument Körper ... http://learnlayout.com/position.html

Ihr Arbeitsbeispiel:

.images { 
 
    text-align: center; 
 
    padding: 15px 15px; 
 
    position: relative; 
 
    vertical-align: middle; 
 
    display: inline; 
 
    width: 430px; 
 
    margin: 10px 0; 
 
} 
 
#img-row { 
 
    display: block; 
 
    margin-top: -15px; 
 
    position: relative; 
 
    height: auto; 
 
    max-width: auto; 
 
    overflow-y: hidden; 
 
    overflow-x: auto; 
 
    word-wrap: normal; 
 
    white-space: nowrap; 
 
    text-align: center; 
 
} 
 
#img-row > a { 
 
    position: relative; 
 
} 
 
#img-row:after { 
 
    content: ""; 
 
    position: absolute; 
 
    display: block; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 1; 
 
} 
 
.class { 
 
    position: relative; 
 
} 
 
.button { 
 
    display: block; 
 
    background-color: #bbb; 
 
    margin: 10px; 
 
    padding: 10px; 
 
} 
 
button.button { 
 
    width: 570px; 
 
    margin-left: 182px; 
 
    height: 40px; 
 
    font-size: 30px; 
 
} 
 
.caption-text { 
 
    display: block; 
 
    position: absolute; 
 
    width: 100%; 
 
    color: green; 
 
    left: 0; 
 
    bottom: 50%; 
 
    padding: 1em; 
 
    font-weight: 700; 
 
    z-index: 2; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    background-color: #fff; 
 
}

<div id="img-row"> 
 
    <a href=""> 
 
    <button class="button"> 
 
     Button 
 
    </button> 
 
    </a> 
 
</div> 
 
<div id="img-row"> 
 

 
    <a href=""> 
 
    <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg" class="images" /> 
 
    <figcaption class="caption-text">This is a caption text</figcaption> 
 
    </a> 
 
    <a href=""> 
 
    <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg" class="images" /> 
 
    <figcaption class="caption-text">This is a caption text</figcaption> 
 
    </a> 
 

 
</div> 
 
<div id="img-row"> 
 
    <a href=""> 
 
    <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg" class="images" /> 
 
    <figcaption class="caption-text">This is a caption text</figcaption> 
 
    </a> 
 
    <a href=""> 
 
    <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg" class="images" /> 
 
    <figcaption class="caption-text">This is a caption text</figcaption> 
 
    </a> 
 
</div>