html - 多张图片前面的文字

您好，我被分配为课堂做一个基本的个人主页，但是对于html页面之一，我无法将文本放在每个单独的图像前面，因此我取消了尝试以减轻混乱。

<div class="aboutmeprofile">
    <h2 id="h2">Portfolio</h2>
    <hr></hr>
    <img src="assets/images/gym.jpg" alt="gym">Gym
    <img src="assets/images/hiking.jpg" alt="hiking">Hiking
    <img src="assets/images/overwatch.jpg" alt="overwatch">Overwatch
    <img src="assets/images/running.jpg" alt="running">Running
    <img src="assets/images/programming.jpg" alt="programming">Programming
</div>

  .aboutmeprofile {
    float: left;
    background-color: white;
    width: 650px;
    margin: 10px;
    line-height: 150%;
    padding: 10px;
    margin-top: 30px;
}

最佳答案

您需要使用CSS将文本绝对定位在图像的前面。它有助于将每个图像和文本项包装到一个块中以应用css。

<div class="aboutmeprofile">
    <h2 id="h2">Portfolio</h2>
    <hr/>
    <div class="item">
        <img src="assets/images/gym.jpg" alt="gym">
        <span>Gym</span>
    </div>
    <div class="item">
        <img src="assets/images/hiking.jpg" alt="hiking">
        <span>Hiking</span>
    </div>
    <div class="item">
        <img src="assets/images/overwatch.jpg" alt="overwatch">
        <span>Overwatch</span>
    </div>
    <div class="item">
        <img src="assets/images/running.jpg" alt="running">
        <span>Running</span>
    </div>
    <div class="item">
        <img src="assets/images/programming.jpg" alt="programming">
        <span>Programming</span>
    </div>
</div>

CSS：

.item {
    position: relative;
}

.item span {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

编辑：添加了一个简化的小提琴示例

* {
  box-sizing: border-box;
}

.aboutmeprofile {
    float: left;
    background-color: white;
    margin: 10px;
    line-height: 150%;
    padding: 10px;
    margin-top: 30px;
}

.item {
    position: relative;
    width: 100%;
}

.item span {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    text-align: center;
    width: 100%;
}

<div class="aboutmeprofile">
    <h2 id="h2">Portfolio</h2>
    <hr/>
    <div class="item">
        <img src="https://placehold.it/400x300/ddd/ddd" alt="gym">
        <span>Gym</span>
    </div>
    <div class="item">
        <img src="https://placehold.it/400x300/ddd/ddd" alt="hiking">
        <span>Hiking</span>
    </div>
    <div class="item">
        <img src="https://placehold.it/400x300/ddd/ddd" alt="overwatch">
        <span>Overwatch</span>
    </div>
    <div class="item">
        <img src="https://placehold.it/400x300/ddd/ddd" alt="running">
        <span>Running</span>
    </div>
    <div class="item">
        <img src="https://placehold.it/400x300/ddd/ddd" alt="programming">
        <span>Programming</span>
    </div>
</div>

关于html - 多张图片前面的文字，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41865474/