css中怎样设置文本居中显示图片

CSS中如何设置文本居中显示图片
在网页设计中，经常会遇到需要在文本中插入一张图片的情况。这时候，如何让图片在文本中居中呢？下面，我们就来介绍CSS中如何设置文本居中显示图片。
首先，我们需要先定义一个容器，把文本和图片封装起来，以便进行后续的样式设置。这里我们使用一个div元素作为容器，如下所示：

<div class="container">
    <p>这里是一段文本，引用了一张图片：<br>
        <img src="img/example.png">
    </p>
</div> 

接下来，我们就可以通过CSS来设置文本和图片的居中了。
首先，我们需要对容器进行样式设置，让它的文本居中显示。这可以通过设置text-align属性为"center"来实现，如下所示：

.container{
    text-align:center;
} 

接着，我们需要设置图片居中显示。为了实现这一目的，我们需要先把图片转化为块级元素，然后再设置它的margin属性为"auto"。如下所示：

.container img{
    display:block;
    margin:auto;
} 

这样，我们就成功地把文本和图片都居中显示了。
总结一下，要让文本和图片在CSS中居中显示，我们需要先定义一个容器，然后分别设置容器和图片的样式。容器的样式可以通过设置text-align属性为"center"来实现文本居中显示；图片的样式可以通过将它转化为块级元素，并设置其margin属性为"auto"来实现图片居中显示。