图片设置居中对齐后与后续文本无间距问题

问题根源 #

该现象本质是元素类型变更导致的默认间距失效：

• 未设置居中对齐时，图片默认是行内/行内块元素，和下方文本的间距由段落行高、行内元素默认的上下边距共同提供，所以显示正常。
• 给图片设置居中时，通常会用到display: block+左右margin自动的写法实现块级居中，此时图片变为块级元素，行高带来的默认间距失效，如果没有手动设置底部外边距，就会出现和下方文本贴在一起的情况。

解决方案 #

方案1：直接给居中图片新增底部外边距（最常用）

如果你是自定义CSS实现的居中，修改原有样式，在margin属性中增加底部间距值即可，数值可以和你网站的段落间距保持一致（通常为1em或者16px）：

/* 原居中样式调整示例 */
.align-center {
  display: block;
  /* 最后一个属性值为底部间距，可按需调整 */
  margin: 0 auto 1em auto;
}

方案2：用文本居中的容器包裹图片（无需修改图片原有样式）

如果不想改动图片的显示属性，可以给外层套一个父容器，给父容器设置文本居中和底部间距，图片保持默认行内属性即可：
CSS代码：

.img-center-box {
  text-align: center;
  margin-bottom: 1em;
}

HTML代码示例：

<div class="img-center-box">
  <img src="图片地址" alt="图片说明">
</div>

方案3：适配CMS自带的居中样式

如果你用的是内容管理系统自带的编辑器对齐功能，直接用属性选择器全局覆盖样式即可，以WordPress为例：

img[align="center"], 
.aligncenter,
.wp-block-image.aligncenter {
  margin-bottom: 1em !important;
}

内容的提问来源于stack exchange，提问作者Ioan