Flex布局下列表项（li）无法居中的问题排查求助

API 探路者

2026-8-5

问题原因与解决方案

核心问题

float: left无效且破坏布局：你的.contact-information是flex容器，在flex上下文里float属性完全不生效，反而会让<li>脱离正常文档流，导致flex的居中规则无法作用于它。
<ul>默认内边距造成偏移：浏览器默认给<ul>设置了padding-left（通常为40px），这会让整个列表向右偏移，视觉上看起来没有居中。
text-align: center作用范围有限：你给<li>添加的这个属性仅能让<a>标签的文字在<li>内部居中，但<li>本身在<ul>里的位置并没有对齐。

修复代码

替换原有列表相关的CSS样式：

.contact-information-container {
    width: 40%;
    margin: 0 20px;
}

.contact-information {
    display: flex;
    text-align: center;
    flex-direction: column;
    margin-bottom: 70px;
}

/* 重置ul默认样式并使用flex布局排列li */
.contact-information ul {
    padding-left: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
}

.contact-information li{
    padding: 0 10px;
    /* 删除无效的float: left */
    text-align: center;
}

修改说明

移除<li>的float: left：flex布局不需要依赖float实现横向排列，这个属性在此场景下完全多余。
重置<ul>默认样式：padding-left: 0消除浏览器默认的左边距，list-style: none可去掉默认的列表圆点（根据视觉需求可选保留）。
将<ul>设为flex容器：display: flex让<li>横向排列，justify-content: center确保所有<li>在<ul>内部水平居中，flex-wrap: wrap处理列表项过多时的自动换行问题。