css 三张图片居中显示

CSS是网页设计的重要一环，对于网页排版和样式设置有着非常重要的作用。今天我们来讲一下如何让三张图片居中显示。

/*CSS代码*/.container{
    display:flex;
    justify-content:center;
    align-items:center;
}
img{
    margin:0 auto;
    display:block;
}
    

首先，我们需要在HTML文件中设置一个容器，用来包裹三张要显示的图片。

div class="container">
    img src="1.jpg">
    img src="2.jpg">
    img src="3.jpg">
    /div>
    

然后，我们需要在CSS文件中设置容器的样式，将三张图片居中显示。我们使用Flex布局，设置容器的justify-content和align-items属性都为center即可。

接着，我们需要对每张图片单独设置样式。我们将图片的margin设置为0 auto，让其水平居中显示，并将其display属性设为block，使其具有块状属性。

最终的代码见下：

div class="container">
    img src="1.jpg" style="width:300px;
    ">
    img src="2.jpg" style="width:300px;
    ">
    img src="3.jpg" style="width:300px;
    ">
    /div>
/*CSS代码*/.container{
    display:flex;
    justify-content:center;
    align-items:center;
}
img{
    margin:0 auto;
    display:block;
}
    

简单几步，就能让三张图片水平垂直居中显示，让网页看起来更加美观。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！