HTML/CSS侧边栏文本图标居中：text-align不生效解决方法

• text-align只对块级容器内部的行内、行内块子元素生效，你给.sidebar ul li a设置了display: flex，它的直接子元素（i图标、文本div）会变成弹性布局项，脱离普通文档流，不受text-align规则控制。
• 弹性布局默认主轴是水平方向，你只写了align-items: center，这个属性只控制交叉轴（垂直方向）的对齐，没有设置主轴方向的对齐规则时，弹性项默认靠主轴起点也就是左侧排列，自然不会居中。
• 你给图标i标签写死了min-width: 60px，相当于给图标预留了固定的左侧占位宽度，文本会被顶在图标右侧，进一步导致整体内容偏左。

不需要改动现有HTML结构，按需选择对应布局的样式即可：

方案1：保留图标+文字左右排列，整体水平居中 #

直接覆盖原有对应样式：

.sidebar ul li a {
    width: 100%;
    text-decoration: none;
    color: #fff;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center; /* 主轴水平居中 */
    gap: 8px; /* 控制图标和文字的间距，可按需调整数值 */
}

.sidebar ul li a i {
    /* 删除原有的min-width: 60px，避免固定宽度造成偏移 */
    font-size: 24px;
}

方案2：图标在上、文字在下，整体块居中（窄侧边栏常用效果） #

如果需要垂直堆叠的居中效果，用以下样式：

.sidebar ul li a {
    width: 100%;
    text-decoration: none;
    color: #fff;
    height: 70px; /* 适当加高适配上下布局 */
    display: flex;
    flex-direction: column; /* 改为垂直排列弹性项 */
    align-items: center;
    justify-content: center;
    gap: 6px; /* 控制图标和文字的上下间距 */
}

.sidebar ul li a i {
    /* 删除原有的min-width: 60px */
    font-size: 24px;
}

.sidebar ul li a div {
    font-size: 14px; /* 可按需调整文字大小 */
}

补充：如果要保留图标固定60px宽度、文字紧跟图标的原有排版，仅让图标+文字的整体块在导航项中居中，可以在a标签内加一层div包裹i和文本元素，给这个包裹层设置display: flex; align-items: center;，再给a标签设置justify-content: center即可，不需要改动其他原有规则。

内容的提问来源于stack exchange，提问作者pomoworko.com