[分享]css中字中图片怎么居中显示

在进行网页设计时经常需要使用图像来为页面增加美观度，但是对于文字与图片的居中显示，很多人可能不是很清楚该怎么操作，下面就来详细介绍一下如何在CSS中对文字与图片进行居中显示。 div{ textali...

在进行网页设计时经常需要使用图像来为页面增加美观度，但是对于文字与图片的居中显示，很多人可能不是很清楚该怎么操作，下面就来详细介绍一下如何在CSS中对文字与图片进行居中显示。

 div{
         text-align: center;   /*让文字水平居中显示*/
        }

        img{
         display: block;      /*将图片转化为块级元素*/
         margin: 0 auto;     /*通过设置外边距让图片水平居中*/
        } 

首先我们需要知道，文字和图片居中显示的方法是不同的，下面分别进行介绍。

1. 文字居中显示

要让文字水平居中显示，我们可以使用text-align属性，具体代码如下：

 div{
         text-align: center;   /*让文字水平居中显示*/
        } 

2. 图片居中显示

对于图片的居中显示，我们需要使用display和margin属性，代码如下：

 img{
         display: block;      /*将图片转化为块级元素*/
         margin: 0 auto;      /*通过设置外边距让图片水平居中*/
        } 

通过上述代码，我们将图片转化为块级元素，并设置了外边距为“0 auto”，这样就能让图片水平居中显示。

综上所述，通过设置text-align和display属性以及设置外边距，我们可以轻松实现文字和图片的居中显示。希望本文能帮助到大家。