看起来你在调试BeRocket AJAX产品筛选插件的布局对吧？我帮你梳理下解决方案，完美实现你要的效果：

核心需求回顾 #

• 标签、复选框、文本水平对齐
• 复选框保持垂直整齐排列
• 整个筛选列表水平居中

针对性CSS解决方案 #

结合你提供的HTML结构，添加以下CSS代码就能搞定：

/* 让整个筛选列表容器水平居中 */
.berocket_aapf_widget {
  margin: 0 auto;
  max-width: 320px; /* 可选：限制宽度，避免布局太宽 */
  padding-left: 0;
  list-style: none; /* 去掉默认的圆点列表样式 */
}

/* 处理每个列表项的内部对齐 */
.berocket_aapf_widget li {
  display: flex;
  align-items: center; /* 确保复选框与文本垂直居中对齐 */
  justify-content: flex-start; /* 内容左对齐，保证复选框垂直排列整齐 */
  margin-bottom: 10px; /* 给每个选项加间距，更美观 */
  width: 100%; /* 让每个li占满容器宽度，对齐更一致 */
}

/* 统一复选框样式与间距 */
.berocket_aapf_widget input[type="checkbox"] {
  margin-right: 8px; /* 复选框与标签之间的间距 */
  width: 18px;
  height: 18px; /* 固定复选框大小，避免浏览器差异 */
  flex-shrink: 0; /* 防止复选框被flex布局压缩变形 */
}

/* 优化标签文本的排版 */
.berocket_aapf_widget label {
  flex: 1; /* 让标签占据剩余空间，文本换行时不会错位 */
  line-height: 1.5; /* 保证文本垂直居中，和复选框对齐 */
}

代码说明 #

1. 整体居中：给.berocket_aapf_widget设置margin: 0 auto实现水平居中，同时清除默认的列表内边距和圆点，避免布局偏移。
2. 内部水平对齐：用Flex布局处理每个li，align-items:center确保复选框和文本垂直居中，justify-content:flex-start让内容左对齐，保证所有复选框垂直排列在同一条线上。
3. 复选框一致性：固定复选框的宽高和右边距，避免不同浏览器的默认样式差异，flex-shrink:0防止复选框被压缩。
4. 标签排版：flex:1让标签自动填充剩余空间，文本换行时也能和复选框保持对齐，不会出现错位。

如果插件本身有默认样式干扰，可以给选择器加上更高的优先级（比如在类名前加上父容器的类），或者临时用!important（尽量少用，优先调整选择器优先级）。

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