css 中设置居中显示图片

在网页设计中，图片是很重要的组成部分。然而，在网页中添加图片后，常常出现图片未能正确居中显示的问题。接下来，本文将介绍如何使用CSS设置居中显示图片。

/* HTML代码 */div class="container">
      img src="example.jpg" alt="example">
    /div>
/* CSS代码 */.container {
      display: flex;
     /* 设置容器为弹性盒子 */  justify-content: center;
     /* 水平居中 */  align-items: center;
 /* 垂直居中 */}
.container img {
      max-width: 100%;
     /* 图片最大宽度 */  height: auto;
 /* 高度自适应 */}
    

首先，在HTML代码中，我们将图片放在一个div容器中。然后，在CSS代码中，我们将这个容器设置为弹性盒子，使其可以容纳图片并进行水平和垂直居中。其中，justify-content属性设置水平居中，align-items属性设置垂直居中。

为了确保图片不会过大或过小，我们还可以使用CSS中的max-width属性来限制图片的最大宽度，并使用height属性来让高度自适应，即高度随宽度的变化而变化。

使用以上CSS代码，我们可以轻松地设置居中显示图片，让网页看起来更美观和整洁。

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