在页面中心并排对齐 3 个图像？ HTML
Posted
技术标签:
【中文标题】在页面中心并排对齐 3 个图像？ HTML【英文标题】：Align 3 images side by side on center of page? 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 src="images/image1.jpg" class="images"/>
</div>
<div class="img123">
<img src="images/image2.jpg" class="images"/>
</div>
<div class="img123">
<img src="images/image3.jpg" 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;
【问题讨论】：
【参考方案1】：我最喜欢的方式是在站点范围内设置 2 个课程：
.row
display: flex;
flex-direction: row;
.col
flex-direction: column;
这样，您可以使用这两个类轻松对齐内容。行应该始终是父容器。以下是处理 html 的方法：
<div class="row">
<div class="col img123">
<img src="images/image2.jpg" class="images"/>
</div>
<div class="col img123">
<img src="images/image2.jpg" class="images"/>
</div>
<div class="col img123">
<img src="images/image2.jpg" 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" >
</div>
<div class="image"> <!--2 image-->
<img src="https://images.pexels.com/photos/1878095/pexels-photo-1878095.jpeg" >
</div>
<div class="image"><!--3 image-->
<img src="https://images.pexels.com/photos/572487/pexels-photo-572487.jpeg" >
</div>
</div>
</body>
</html>【讨论】：
以上是关于在页面中心并排对齐 3 个图像？ HTML的主要内容，如果未能解决你的问题，请参考以下文章