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.

将包含图像的图像分组到页面中心

1 个答案: