制作一个漂浮在中心的图片库

Question

我一直在试图做一个简单的图库，其中图片漂浮在一行中，但在中心..对不起，我的英语不好。

但是我遵循w3s的例子，并尝试使用我的标志，但它从左到右浮动，我希望它尽可能居中，但连续有超过1张图片。

这里是我的CSS

div.img { 
    margin: 5px; 
    border: 1px solid #d60079; 
    float: left; 
    width: 180px; 
    } 

div.img:hover { 
    border: 2px solid #f0068a; 
} 

div.img img { 
    width: 100%; 
    height: auto; 
    float:center; 
} 

div.desc { 
    padding: 15px; 
    text-align: center; 
} 

和HTML

<div class="img"> 
    <a target="_blank" href="testlogo.png"> 
    <img src="test4.png" alt="Fjords" width="300" height="200"> 
    </a> 
    <div class="desc">Add a description of the image here</div> 
</div> 

<div class="img"> 
    <a target="_blank" href="testlogo.png"> 
    <img src="test4.png" alt="Fjords" width="300" height="200"> 
    </a> 
    <div class="desc">Add a description of the image here</div> 
</div> 
</div> 
</body> 

Answer 1

有作为float: center没有这样的事情。只需将text-align: center css添加到父div，所有内容都将居中。

编辑

如果你正在寻找居中图像的行，我建议使用柔性盒（见联样式）

html, body { 
 
    width: 100%; 
 
} 
 

 
div.img { 
 
    margin: 5px; 
 
    border: 1px solid #d60079; 
 
    width: 180px; 
 
    text-align: center 
 
    position: inline-block; 
 
    } 
 

 
div.img:hover { 
 
    border: 2px solid #f0068a; 
 
} 
 

 
div.img img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
div.desc { 
 
    padding: 15px; 
 
}

<div style="display: flex; justify-content: center"> 
 
    <div class="img"> 
 
     <a target="_blank" href="testlogo.png"> 
 
     <img src="http://placehold.it/350x150" alt="Fjords" width="300" height="200"> 
 
     </a> 
 
     <div class="desc">Add a description of the image here</div> 
 
    </div> 
 

 
    <div class="img"> 
 
     <a target="_blank" href="testlogo.png"> 
 
     <img src="http://placehold.it/350x150" alt="Fjords" width="300" height="200"> 
 
     </a> 
 
     <div class="desc">Add a description of the image here</div> 
 
    </div> 
 
    </div>