将包含图像叠加图像的图像分组到图像中心

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.