相对于图像定位文本

Question

我有几张带有独特字幕的图片，我希望独特的字幕显示在图像的中心。这是我的代码：

    .photos-container img {
    
    display: inline-flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-basis: auto;
    justify-content: space-between;
    align-content: center;
    padding: 7px;
    width: 30%;
    transform: scale(1.00);
    float: left;
}

    .photos-container h2{
    color: #091253;
    font-weight: 400;
    margin: 2% 46%;
    font-size: 35px;
}

    .notes {
    font-weight: 400;
    font-size: 30pt;
    position: absolute;
    top: 0;
	left: 0;
	width: 100%;
	text-align: center;
	opacity: 0;
    color: #091253;
    display: block;
}

    .photos-container img:hover + .notes {
    opacity: 1;
}

  <div class="photos-container">
            <h2>Photo's</h2>
            <div class="photo-1">
                <a href="#">
                    <img src="https://s-media-cache-ak0.pinimg.com/originals/43/d2/06/43d2062cf1aae38642df128288356b29.jpg">
                <div class="notes">Test #1</div>
                </a>
             </div>
            <div class="photo-1">
                <a href="#">
                    <img src="https://s-media-cache-ak0.pinimg.com/originals/43/d2/06/43d2062cf1aae38642df128288356b29.jpg">
                <div class="notes">Test #2</div>
                </a>
             </div>
            <div class="photo-1">
                <a href="#">
                    <img src="https://s-media-cache-ak0.pinimg.com/originals/43/d2/06/43d2062cf1aae38642df128288356b29.jpg">
                <div class="notes">Test #3</div>
                </a>
             </div>
           </div>

当我将鼠标悬停在图像上时，会显示正确的标题，但标题不会位于正确图像的中心。

Answer 1

我纠正了你的css，将显示添加到div中，然后将img-div的宽度激活，然后给它相对位置试试这个：

＆＃13;

＆＃13;

.photos-container img {
    
    
    flex-wrap: wrap;
    flex-direction: row;
    flex-basis: auto;
    justify-content: space-between;
    align-content: center;
    padding: 7px;
    transform: scale(1.00);
    float: left;
    width: 100%;
}

    .photos-container h2{
    color: #091253;
    font-weight: 400;
    margin: 2% 46%;
    font-size: 35px;
    display:inline-block;
    width: 100%;
}

    .notes {
    font-weight: 400;
    font-size: 30pt;
    position: absolute;
    top: 0;
	left: 0;
	width: 100%;
	text-align: center;
	opacity: 0;
    color: #091253;
    display:inline-block
}

    .photos-container img:hover + .notes {
    opacity: 1;
}
.photo-1{position:relative;display:inline-block;width: 32%;}

＆＃13;

<div class="photos-container">
            <h2>Photo's</h2>
            <div class="photo-1">
                <a href="#">
                    <img src="https://s-media-cache-ak0.pinimg.com/originals/43/d2/06/43d2062cf1aae38642df128288356b29.jpg">
                <div class="notes">Test #1</div>
                </a>
             </div>
            <div class="photo-1">
                <a href="#">
                    <img src="https://s-media-cache-ak0.pinimg.com/originals/43/d2/06/43d2062cf1aae38642df128288356b29.jpg">
                <div class="notes">Test #2</div>
                </a>
             </div>
            <div class="photo-1">
                <a href="#">
                    <img src="https://s-media-cache-ak0.pinimg.com/originals/43/d2/06/43d2062cf1aae38642df128288356b29.jpg">
                <div class="notes">Test #3</div>
                </a>
             </div>
           </div>

＆＃13;

＆＃13;

＆＃13;