如何在Blogspot中实现容器列居中对齐

核心原理 #

块级元素宽度设为auto后默认会占满父元素可用宽度，如果父元素或容器本身有单侧的边距/内边距配置，就会出现左右边距不一致的情况，补全自动左右边距配置即可实现居中。

操作步骤 #

• 第一步：找到你之前修改宽度的容器CSS代码块，选择器名称和模板有关，wrapper、main-container、outer-container都有可能，找到你替换width: 1000px为width: auto的代码块即可，通常格式如下：

/* 你之前修改的容器CSS块 */
.你的容器类名 {
  width: auto;
  /* 原有其他属性 */
}

• 第二步：在该代码块中添加3行属性即可完成居中

.你的容器类名 {
  width: auto;
  max-width: 1200px; /* 可自定义数值，控制容器最大宽度，避免超宽屏内容过长影响阅读 */
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box; /* 自动计算内边距，避免内边距撑宽容器导致偏移 */
  /* 原有其他属性保留即可 */
}

异常排查 #

如果修改后仍有右侧边距偏大的问题，可以依次检查：

1. 该容器的父元素是否配置了单侧的padding或者margin，比如仅设置了padding-left: 15px，修改为左右对称的padding: 0 15px即可
2. 如果是带侧边栏的布局，检查主内容区+侧边栏的总宽度是否超过了外层容器的宽度，超出会导致侧边栏溢出，撑出额外的右侧边距

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