Question

我试图将一堆图像水平居中，每个图像都有自己的DIV标记。我试图使用文本对齐中心，但这不起作用。其他问题建议在右侧和左侧使用margin auto，但这也没有用。我用它来处理一个图像，但是当我开始添加多个图像时，从上到下对齐，我需要它们水平对齐。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 50%;
  height: auto;
  text-align: center;

}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
   left: 0;
  right: 0;
  height: 100%;
  width: 50%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
 }

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

  .text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
</style>
</head>
<body>



<div class="container">
  <img src="img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">text1</div>
  </div>
</div>

<div class="container">
  <img src="img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">text2</div>
  </div>
</div>

  <div class="container">
    <img src="img_avatar.png" alt="Avatar" class="image">
   <div class="overlay">
   <div class="text">text3</div>
  </div>
 </div>

  <div class="container">
   <img src="img_avatar.png" alt="Avatar" class="image">
   <div class="overlay">
     <div class="text">text4</div>
   </div>
 </div>

 </body>
 </html>

谢谢！

Answer 1

将以下属性添加到容器类可能会有所帮助

.container {
         display: inline-block
    }

将多个具有自己DIV的图像居中

1 个答案: