css中插入图片如何设置居中

CSS中插入图片如何设置居中
在网页设计中，插入图片可以使页面更加生动活泼。但是，图片的大小和位置往往与整个页面的布局不太协调，这时候就需要使用CSS来处理。
插入图片的方法很简单，只需要在HTML中使用img标签即可，如下所示：

 <img src="images/pic.jpg" alt="图片" /> 

其中，src属性为图片的路径，alt属性为图片的名称。
如果要让图片居中显示，可以通过CSS中的text-align和margin属性来实现。
使用text-align属性可以将图片水平居中，代码如下：

 p {
        text-align: center;
    } 

这样，p标签内的所有内容都会水平居中，包括图片。如果只想让图片水平居中，可以将img标签放在一个div中，然后给div设置text-align属性。
使用margin属性可以让图片竖直居中。margin的值可以是一个数值，也可以是auto。如果对图片设置margin-top和margin-bottom的值为auto，图片就会竖直居中。代码如下：

 img {
        margin-top: auto;
        margin-bottom: auto;
    } 

如果要对多个图片都进行居中设置，可以使用class来统一处理。代码如下：

 <p class="center">
        <img src="images/pic1.jpg" alt="图片1" />
        <img src="images/pic2.jpg" alt="图片2" />
    </p>
    
    .center {
        text-align: center;
    }
    
    .center img {
        margin-top: auto;
        margin-bottom: auto;
    } 

这样，class为center的p标签内的所有图片都会水平居中并且竖直居中。