[分享]css3文字与图片水平居中对齐

CSS3是CSS的一个重要版本，拥有更多的效果和属性，使得我们可以更加轻松地实现一些网页设计的效果，比如文字以及图片水平居中对齐。 对于文字的水平居中，我们可以通过以下代码实现： HTML 文字水平居...

CSS3是CSS的一个重要版本，拥有更多的效果和属性，使得我们可以更加轻松地实现一些网页设计的效果，比如文字以及图片水平居中对齐。
对于文字的水平居中，我们可以通过以下代码实现：

HTML
<p class="center_text">文字水平居中</p> 

CSS
.center_text {
  text-align: center;
} 

上述代码中，我们通过将p标签的文本居中来实现文字水平居中的效果。这里使用的是text-align属性，将其值设为center即可。
而对于图片的水平居中，我们需要给img标签设置一些样式：

HTML
<p class="center_img">
  <img src="example.jpg" alt="图片水平居中" />
</p> 

CSS
.center_img {
  text-align: center;
}
<br>
.center_img img {
  display: inline-block;
} 

上述代码中，我们首先将p标签的文本居中，然后给img标签设置了display属性的值为inline-block。这使得图片不再是块级元素，而是可以和文字一样进行水平居中。
通过上述代码的设置，我们可以轻松实现文字和图片的水平居中对齐效果，让网页设计更加美观和精致。