如何实现菜单居中对齐且布局规整？

你的问题核心是要让.menu整体在.left-menu里居中，同时.menu内的图标和文字保持整齐的左对齐，而不是让每个菜单项的内容单独居中。

问题根源 #

• 给.left-menu加text-align:center时，会让.menu里每个<p>标签内的行内元素（图标+文字）都居中对齐，不同长度的文字会导致视觉上对齐混乱。
• 给.menu加text-align:left时，.menu作为块级元素默认占满父容器.left-menu的宽度，所以内容直接贴到左边界。

解决方案 #

只需要调整.menu的布局，让它本身在.left-menu里水平居中，同时保持内部内容左对齐：

1. 去掉.left-menu的text-align:center（不需要父容器控制内部文本对齐）
2. 给.menu设置margin: 0 auto实现水平居中，同时限制它的宽度（比如设为80%）避免占满父容器，保留text-align:left让内部内容左对齐。

修改后的CSS代码：

.left-menu {
  width: 15%;
  float: left;
  background-color: lightgrey;
  height: 100%;
  color: #3f3f3f;
  /* 移除text-align:center */
}

.right-content {
  width: 85%;
  float: right;
  background-color: white;
  height: 100%;
}

.menu {
  height: 100%;
  text-align: left;
  margin: 0 auto; /* 实现水平居中 */
  width: 80%; /* 限制宽度，避免内容贴边 */
}

扩展：用Flex布局实现（更现代的方案） #

如果不想依赖float，可以把.left-menu改成Flex容器，代码更简洁直观：

.left-menu {
  width: 15%;
  background-color: lightgrey;
  height: 100vh; /* 确保占满视口高度 */
  color: #3f3f3f;
  display: flex;
  justify-content: center; /* 子元素水平居中 */
}

.right-content {
  width: 85%;
  background-color: white;
  height: 100vh;
}

.menu {
  text-align: left;
  width: 80%; /* 限制宽度，内部内容左对齐 */
  padding-top: 1rem; /* 可选：添加顶部内边距，避免菜单贴顶 */
}

调整后，.menu整体在左侧栏居中，内部的图标和文字会整齐左对齐，完全符合你想要的效果。

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