文字换行图片 WordPress CSS

在网页设计中，有时需要在一段文字中插入图片，但是默认情况下，文字和图片会连成一起，导致布局混乱。如何在 WordPress 网站中实现文字和图片分行排列呢？这就需要运用 CSS 技术了。

方法一：使用“clear:both”

在 WordPress 的编辑器中，插入图片后，其上下文字与图片间会出现间隙，但此时图片仍会跟随文本，不会单独一行显示。这时，可以在 CSS 文件中为图片添加 clear 属性，并设置值为 both，即清除图片两侧的浮动，达到文字和图片分行排列的效果。

.clearfix:after{
    content: "";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
.clearfix{
    zoom: 1;
}

在 WordPress 的编辑器中为图片添加 CSS 类名 clearfix。

<p>这是一段文字。</p>
<img src="img.jpg" alt="" class="clearfix">
<p>这是另一段文字。</p>

方法二：使用文本对齐

另一种方法是使用 text-align 属性，将文字和图片都设置为居中对齐。这样可以使图片自动占据一行，实现了文字和图片的分行排列。

.center{
    text-align:center;
}
.center img{
    display:block;
    margin: 0 auto;
}

在 WordPress 的编辑器中为图片添加 CSS 类名 center。

<div class="center">
    <p>这是一段文字。</p>
    <img src="img.jpg" alt="">
    <p>这是另一段文字。</p>
</div>

以上两种方法都可以实现文字和图片分行排列的效果，具体使用哪种方法，可以根据实际情况进行选择。