正文自动缩进,图片居中的CSS设置

 

wordpress,CSS内设置文章正文的文字自动缩进2个字,但文章正文内的图片不会自动缩进,图片执行自动居中的代码:

 

/* 文章正文段落自动缩进2个字 */
.entry-content p {
text-indent: 2em;
}

/* 排除包含图片的段落不缩进 */
.entry-content p:has(img) {
text-indent: 0;
}

/* 图片自动居中 */
.entry-content img,
.entry-content figure,
.entry-content .wp-block-image {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}

/* 古腾堡编辑器图片块居中 */
.entry-content .wp-block-image {
text-align: center;
}

/* 图片说明文字居中 */
.entry-content figcaption {
text-align: center;
font-style: italic;
margin-top: 8px;
font-size: 0.9em;
}

/* 确保图片在段落中也能居中 */
.entry-content p img {
display: block;
margin: 0 auto;
text-indent: 0;
}

/* 清除图片容器的缩进 */
.entry-content .wp-block-image p,
.entry-content figure p {
text-indent: 0 !important;
}

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注