时间戳

首页 > 解决方案 > 如何在容器 div 内的 div 中居中多个图像（我尝试了几种方法，包括：text-align:center 和 justify-content）

html - 如何在容器 div 内的 div 中居中多个图像（我尝试了几种方法，包括：text-align:center 和 justify-content）

问题描述

试图在容器 div 内的 div 中居中图像。

这是 html，图像包含在容器 div 中

<div class="container">    
   <div class="col"> 
       <img src="../Images/New folder (2)/Blue Tie.jpg" />
       <p>Blue Tie</p>
   </div>
   <div class="col"> 
       <img src="../Images/New folder (2)/Cardigan.jpg" />
       <p>Cardigan</p>
   </div>
</div>

这是CSS

.container{
    display:flex;
    max-width: 350px;
    text-align: center;   
}

.col{
    min-width: 100px;
    margin-bottom: 30px;
    padding:5px;
    width:100%;
    display:block;  
}


.col img{
    width:100%;
}

标签： htmlcss

解决方案

首先，容器应设置为 100%，以便获得整个宽度。然后将容器的显示设置为并将 andflex设置为居中，以便每个孩子都居中对齐。align itemsjustify content

其次，你必须给孩子一个特定的宽度，否则他们会同样填满父母的宽度。

.container{
    display:flex;
    align-items: center;
    justify-content: center;
    background:lightgrey;
    padding: 2rem 0;
}

.col{
    max-width: 100px;
    margin-bottom: 30px;
    padding:5px;
    width:100%;
    display:block;  
}


.col img{
    width:100%;
}
<div class="container">    
   <div class="col"> 
       <img src="https://image.shutterstock.com/image-photo/colorful-hot-air-balloons-flying-260nw-1033306540.jpg" />
       <p>Blue Tie</p>
   </div>
   <div class="col"> 
       <img src="https://image.shutterstock.com/image-photo/colorful-hot-air-balloons-flying-260nw-1033306540.jpg" />
       <p>Cardigan</p>
   </div>
   <div class="col"> 
       <img src="https://image.shutterstock.com/image-photo/colorful-hot-air-balloons-flying-260nw-1033306540.jpg" />
       <p>Cardigan</p>
   </div>
   <div class="col"> 
       <img src="https://image.shutterstock.com/image-photo/colorful-hot-air-balloons-flying-260nw-1033306540.jpg" />
       <p>Cardigan</p>
   </div>
   <div class="col"> 
       <img src="https://image.shutterstock.com/image-photo/colorful-hot-air-balloons-flying-260nw-1033306540.jpg" />
       <p>Cardigan</p>
   </div>
   <div class="col"> 
       <img src="https://image.shutterstock.com/image-photo/colorful-hot-air-balloons-flying-260nw-1033306540.jpg" />
       <p>Cardigan</p>
   </div>
</div>

推荐阅读