位置テキストの画像に対する相対

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; 
 
\t left: 0; 
 
\t width: 100%; 
 
\t text-align: center; 
 
\t 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要素の幅をspicified：

.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; 
 
\t left: 0; 
 
\t width: 100%; 
 
\t text-align: center; 
 
\t opacity: 0; 
 
    color: #091253; 
 
    display:inline-block 
 
} 
 

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

<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>