將包含圖像疊加圖像的圖像分組到圖像中心

Question

我試圖將圖像組（圖像爲3x3的圖像）居中放置到網頁中心，我在添加圖像疊加圖像之前設法做到這一點。但是，由於我添加了圖像疊加，圖像出現在網頁的左上角。我如何將它們分組並將它們居中，以及我應該如何獲取圖像位置，以便在設置圖像疊加層時，它會轉到特定圖片，因爲每張圖片都會具有不同的圖像疊加文本。

CSS

.container { 
    position: relative; 
    width: 100px; 
    height: 100px; 
} 

.image { 
    display: block; 
    width: 100px; 
    height: 100px; 
} 

.overlay { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 100%; 
    width: 100%; 
    opacity: 0; 
    transition: .5s ease; 

} 

.container:hover .overlay { 
     opacity: 1; 
} 

.text { 
    color: red; 
    font-size: 20px; 
    font-weight: bold; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
} 

HTML

<div style="text-align:center"> 
<div class="container"> 
<img src="wheel1.jpg" class="image"> 
    <div class="overlay"> 
     <div class="text">Hello World</div> 
    </div> 
</div> 
<div class="container"> 
<img src="wheels2.jpg" class="image"> 
    <div class="overlay"> 
     <div class="text">Hello World</div> 
    </div> 
</div> 
<div class="container"> 
<img src="wheel3.jpg" class="image""> 
    <div class="overlay"> 
     <div class="text">Hello World</div> 
    </div> 
</div> 

`

Answer 1

你可以使用flexbox居中。你的主要DIV

<div style="text-align-center;"> 
    ...... 
</div> 

更改爲

<div style="display: flex; flex-direction: column;align-items: center;"> 
    ..... 
</div> 

，它應該工作。

.wrapper{ 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: center; 
 
} 
 

 
.container { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
.image { 
 
    display: block; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid red; 
 
} 
 

 
.overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    opacity: 0; 
 
    transition: .5s ease; 
 

 
} 
 

 
.container:hover .overlay { 
 
     opacity: 1; 
 
} 
 

 
.text { 
 
    color: red; 
 
    font-size: 20px; 
 
    font-weight: bold; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
}

<div class="wrapper"> 
 
    <div class="container"> 
 
    <div class="image"></div> 
 
     <div class="overlay"> 
 
      <div class="text">Hello World</div> 
 
     </div> 
 
    </div> 
 
    <div class="container"> 
 
    <div class="image"></div> 
 
     <div class="overlay"> 
 
      <div class="text">Hello World</div> 
 
     </div> 
 
    </div> 
 
    <div class="container"> 
 
    <div class="image"></div> 
 
     <div class="overlay"> 
 
      <div class="text">Hello World</div> 
 
     </div> 
 
    </div> 
 
    </div>

Here is the fiddle.