求助：如何实现Material Icons图标与文本的对齐？当前对齐尝试失败

嘿，我看了你的代码，发现两个核心问题导致图标和文本没法对齐：HTML结构混乱，以及缺少垂直对齐的样式设置。我帮你整理并修复了代码，来看看怎么解决：

首先，修复你的HTML结构问题 #

你的代码里存在标签嵌套错误（比如<body>写在了<html>之前，还有重复的<body>标签），而且<a>Enabled<a>没有正确闭合，这些都会干扰样式的正常生效。

修复后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <link href='https://fonts.googleapis.com/css?family=Inter' rel='stylesheet'>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
  <style>
    /* 全局基础样式 */
    body {
      font-family: 'Inter';
      font-size: 14px;
      color: black;
    }

    /* 容器样式：让图标和文本垂直居中对齐 */
    .icon-text-item {
      display: flex;
      align-items: center;
      gap: 6px; /* 图标和文本之间的间距，可根据需求调整 */
      list-style: none; /* 去掉列表默认的圆点 */
    }

    /* 图标样式 */
    .material-icons-outlined.orange600 {
      color: grey;
    }

    .material-icons-outlined.md-36 {
      font-size: 16px;
    }

    /* 链接样式：去掉下划线，继承文本颜色 */
    a {
      text-decoration: none;
      color: inherit;
    }
  </style>
</head>
<body>
  <li class="icon-text-item">
    <a href="#" target="_blank" class="material-icons-outlined md-36 orange600">check_box</a>
    <span>Enabled</span>
  </li>
</body>
</html>

关键对齐逻辑 #

我用了flex布局来实现对齐：给图标和文本的父容器（.icon-text-item）设置display: flex和align-items: center，这样容器内的元素会自动垂直居中，这是目前最稳定的对齐方式。

如果你不想用flex布局，也可以给图标单独加垂直对齐样式，效果一样：

.material-icons-outlined {
  vertical-align: middle;
}

额外小提示 #

• 你之前用的<enabled>是自定义标签，没有语义，建议用<span>这类通用行内标签代替。
• text-align: right设置在inline元素（比如<a>、<li>）上是无效的，要调整整体对齐的话，应该给父容器设置这个属性。

这样调整后，图标和文本就能完美对齐啦！

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