Google Icons无法实现居中对齐或浮动居中该如何解决

问题原因 #

你的代码存在两个核心错误导致无法实现居中效果：

• float属性不存在center可选值，只有left/right/none等取值，所以float: center规则完全不生效
• <i>标签默认是行内元素，直接给行内元素设置text-align: center无效，该属性需要设置在块级父元素上，用来控制其内部的行内内容对齐方式

可选解决方案 #

方案1：父容器统一控制（适合图标和标题都要居中的场景）

给外层的.dark块级元素添加text-align: center即可，内部的行内图标和标题都会自动居中：

.dark {
  text-align: center;
}

方案2：单独控制图标居中（适合仅图标居中、标题保持原有对齐的场景）

先把图标元素转为块级，再设置水平居中：

.material-icons {
  display: block;
  text-align: center;
  /* 也可以替换为 margin: 0 auto，效果一致 */
}

方案3：Flex布局实现（更灵活，适合后续要调整间距、对齐等复杂需求）

给父容器开启Flex布局，设置纵向排列+交叉轴居中即可：

.dark {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 如果需要调整图标和标题的间距，可以额外给.material-icons加margin-bottom属性 */

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