在页面中心并排对齐 3 个图像？ HTML答案

【问题标题】：Align 3 images side by side on center of page? HTML在页面中心并排对齐 3 个图像？ HTML
【发布时间】：2021-07-04 14:41:00
【问题描述】：

我知道有很多这样的问题，并且我尝试了许多回答这些问题的人建议的方法，但是没有任何效果。我开始认为我的方法没有错，但是我的代码中的其他东西在干扰？比如我的main div

如果有人可以帮助我，我将不胜感激。目前，我的图像只是在容器的左边缘（垂直）堆叠在一起......

这是 HTML：

<div class="main">
<!-- a bunch of <p> tags here I won't include -->
    <div class="img123">
        <img height="200" width="200" src="images/image1.jpg" alt="some text" class="images"/>
    </div>
    <div class="img123">
        <img height="200" width="200" src="images/image2.jpg" alt="some text" class="images"/>
    </div>
    <div class="img123">
        <img height="200" width="200" src="images/image3.jpg" alt="some text" class="images"/> 
    </div>
</div>

这是我尝试用于图像的 CSS 解决方案和 .main div

.image123 {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    height: 30px; 
}

#images{
    text-align:center;
}

.main {
    background-color: #FFFFFF;
    margin: 5em auto;
    padding: 25px;
    border-radius: 1.5em;
    width: 930px;
    display: absolute;
}

【问题讨论】：

标签： html css image alignment

【解决方案1】：

我最喜欢的方式是在站点范围内设置 2 个课程：

.row {
  display: flex;
  flex-direction: row;
}

.col {
  flex-direction: column;
}

这样，您可以使用这两个类轻松对齐内容。行应该始终是父容器。以下是处理 html 的方法：

 <div class="row">
    <div class="col img123">
      <img height="200" width="200" src="images/image2.jpg" alt="some text" class="images"/>
    </div>
    <div class="col img123">
      <img height="200" width="200" src="images/image2.jpg" alt="some text" class="images"/>
    </div>
    <div class="col img123">
      <img height="200" width="200" src="images/image2.jpg" alt="some text" class="images"/>
    </div>
  </div>

如果您希望它均匀分布，请使用：

.col {
    flex: 1;
}

Stackblitz 示例：https://stackblitz.com/edit/js-nddsvq

【讨论】：

我拍了照片，但是当我查看页面时，图像仍然左对齐并垂直堆叠。我的代码中一定有什么事情导致了这种情况，你能够轻松地正确对齐它们......
hmm.. 您可以尝试将代码放入堆栈闪电战中并重新创建问题，以便帮助调试。
我会试试的，谢谢你的帮助！
我终于想通了！这是因为我把每张图片都放在了各自的<div class="col img123"> div 中。我只是将所有三个都放在一个 div 中，它们对齐得恰到好处。不过感谢您的帮助！我仍然非常感谢它。

【解决方案2】：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flexbox</title>
    <style>
        .main{
            width:100%;
            height:100%;
            background-color:yellow;
            display:flex;
            justify-content: center;
        }
        
    </style>
</head>
<body>
    <div class="main">
        <div class="image"> <!--1 image-->
            <img src="https://images.pexels.com/photos/1864189/pexels-photo-1864189.jpeg" width="200" height="200">
        </div>
        <div class="image"> <!--2 image-->
            <img src="https://images.pexels.com/photos/1878095/pexels-photo-1878095.jpeg" width="200" height="200">
        </div>
        <div class="image"><!--3 image-->
            <img src="https://images.pexels.com/photos/572487/pexels-photo-572487.jpeg" width="200" height="200" >
        </div>
    </div>
         
</body>
</html>

【讨论】：