如何让网格项内的列表项居中且保持垂直起始对齐？

问题根源 #

你当前的布局中，两个<ul>作为Bootstrap的col列，默认会被拉伸至相同高度，但内部<li>因内容长度不同且使用text-center，导致垂直方向对齐出现偏移；同时<li>内的图标与文字未结构化分离，也会加剧对齐混乱。

解决方案 #

通过CSS布局调整和HTML结构优化，让列表项保持统一的垂直起始位置：

1. 给列表容器设置flex布局，让内部列表项从顶部开始排列
2. 给列表项设置flex布局，让图标和文字垂直居中，避免内容长度影响对齐
3. 给Bootstrap的row添加align-items-start类，确保两列内容从顶部对齐

修改后的CSS

.text-styles {
    list-style: none;
    font-family: 'Roboto', sans-serif;
    font-size: 100%;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    margin-bottom: 1rem; /* 给列表项添加统一底部间距 */
}
.contact-text {
    color: rgba(99, 99, 99, 1.0);
    text-decoration: none;
}
.foot-list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 列表项从顶部开始排列 */
    padding-left: 0; /* 移除ul默认内边距 */
}
.social-icon {
    flex-shrink: 0; /* 固定图标尺寸，避免被压缩 */
    width: 24px; /* 可根据需求调整图标大小 */
    height: 24px;
}

修改后的HTML

<section class="p-5 bg-warning">
    <div class="container">
        <div class="row align-items-start"> <!-- 添加类让列顶部对齐 -->
            <ul class="col contact-text m-0 foot-list">
                <li class="text-styles">
                    <img class="social-icon m-3" src="./images/phone.png">
                    <span>Ruth: 888 888 888</span>
                </li>
                <li class="text-styles">
                    <img class="social-icon m-3" src="./images/phone.png">
                    <span>Lisa: 888 888 888</span>
                </li>
            </ul>

            <ul class="col contact-text m-0 foot-list">
                <li class="text-styles">
                    <a class="social-link text-styles" href="#">
                        <img class="social-icon m-3" src="./images/instagram.png">
                        <span>@xxxxxxxxxxxxxxxxx</span>
                    </a>
                </li>
                <li class="text-styles">
                    <img class="social-icon m-3" src="./images/gmail.png">
                    <span>xxxxxxxxxxxxxx@gmail.com</span>
                </li>
            </ul>
        </div>
    </div>
</section>

关键说明 #

• align-items-start：强制Bootstrap行内的两列内容从顶部对齐，避免列高度拉伸导致的内部元素偏移
• 列表项的display: flex：让图标和文字作为独立flex项，确保垂直居中的同时，结构更规整
• flex-shrink: 0：固定图标宽度，防止图标因文字过长被压缩，保持视觉一致性

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