HTML页面两个div内横向排列的图片无法对齐如何解决

核心错位原因 #

• 第一行的第一个<a>标签没有<br>换行，同排其他4个<a>都额外加了<br>，直接导致第一张图位置比其他图高
• 父级flex容器只设置了水平对齐规则，未设置垂直对齐规则，子元素默认排版行为不一致
• <p>标签自带的默认外边距没有统一，也会轻微影响对齐效果

具体修复步骤 #

1. 删除第一行后4个<a>标签开头的所有<br>，保证所有<a>内部结构完全一致
2. 统一优化flex容器的样式，补充垂直对齐规则，同时复用样式避免重复写内联代码：

.items {
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start; /* 所有子元素顶部对齐，消除垂直错位 */
    background-color: #4C8C9E;
    padding: 10px 0; /* 可选，给容器添加上下内边距避免内容贴边 */
}
/* 统一a标签内部排版，进一步保证对齐效果 */
.items a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
}
/* 统一图片和文字的间距，消除p标签默认边距的干扰 */
.items p {
    margin: 8px 0 0 0;
    color:white;
    text-align:center;
}

3. 把第二行的div原有内联样式删除，替换为class="items"，和第一行复用样式即可。

核心修改部分代码示例 #

<div ng-controller="SliderController">
    <div class="items">
        <a href="#">
            <img class="img-responsive" src="~/images/ShamanKing.jpg" style="height:130px;"/>
            <p>Shaman King</p>
        </a>
        <a href="#">
            <!-- 已删除多余的<br>标签 -->
            <img class="img-responsive" src="~/images/Limit.jpg" style="height:130px;"/>
            <p>Limit</p>
        </a>
        <!-- 剩余3个第一行的<a>标签同样删除开头的<br>即可 -->
    </div>
    <!-- 第二行复用items类，删除原有重复的内联样式 -->
    <div class="items">
        <!-- 第二行原有内容保持不变 -->
    </div>
</div>

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