css图文字居中 |css3哆啦

今天大家来聊一聊CSS中如何实现图文居中的效果。通常情况下，大家在一个块级元素中插入一张图片和一段文字，此时它们可能会分别居中，看上去比较杂乱。但是大家可以通过CSS来让它们完美居中。一、让图片和文字并列首先，大家可以利用float属性让图片和文字并列。

p {
overflow: auto;
}
img {
float: left;
}
span {
float: left;
}

其中，p元素需要加上overflow:auto属性，这是为了防止浮动元素溢出，影响后面的内容。同时，图片和文字都需要加上float:left属性，让它们排列在一个水平线上。二、水平居中接下来，大家要使图片和文字的整体居中。

p {
text-align: center;
}
img {
display: inline-block;
margin-top: 10px;
}
span {
display: inline-block;
margin-top: 10px;
}

这里大家为p元素添加了text-align:center属性，让图片和文字在p元素中水平居中。图片和文字还需要添加display:inline-block属性，以便在同一行显示。同时，为了调整它们在垂直方向上的位置，大家给它们添加了margin-top属性。最后，大家来看一看代码的完整效果：

<p>
<img src="example.jpg" alt="example" />
<span>这是一个例子文字。</span>
</p>

上面的代码片段中，图片和文字将会并列，并且居中显示。