只有css和html的圖像上的文本

Question

我試圖在圖像的中心添加不同的文本。似乎我無法做到這一點，並需要一些幫助完成任務。

所以，我在頁面上有4張圖片。現在我想把文字放在圖像上。到目前爲止，我在頁面上有4張圖片，但文字沒有正確顯示。下面是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>

的一部分。這是它的樣子至今：JSFIDDLE。文字只出現兩次。

Answer 1

由於您已將圖片嵌套在a標記中，因此文本對齊的方式爲left:0的img-row。現在，它正確地與圖像對準，因爲我加入：

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

考慮以下示例：除了相對於最近定位的祖先像fixed

#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的行爲而不是相對於視口的。如果絕對定位元素沒有定位的祖先，它使用的文件體... http://learnlayout.com/position.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 > 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>