HTML/CSS如何实现两张图片中间排列多个链接的布局

需求说明 #

实现三栏布局效果：

• 两张图片分别固定在容器最左侧、最右侧
• 所有导航链接整体居中排列在两张图片之间的区域，链接垂直排列
  目标布局参考：
  

问题原因 #

当前代码把两张图片和每一个链接的外层div都作为.flex-box的直接子元素，flex默认会把所有同级子元素沿横向排列，无法实现「两图贴边、链接整体居中」的分区效果。

修正代码 #

第一步：调整HTML结构 #

把所有分散的链接统一包裹进一个单独的中间容器，让flex容器下仅保留3个直接子节点：左侧图片、链接组、右侧图片，修正后代码如下：

<div class="container-fluid text-center">
    <h1>Text</h1>
    <div class="flex-box">
        <img src="/image.png" class="side-img">
        <!-- 所有链接统一放入中间容器 -->
        <div class="links-wrapper">
            <a class="h2" th:href="@{/states}">Link1</a>
            <a class="h2" th:href="@{/capitals}">Link2</a>
            <a class="h2" th:href="@{/events}">Link3</a>
            <a class="h2" th:href="@{/wars}">Link4</a>
            <a class="h2" th:href="@{/figures}">Link5</a>
            <a class="h2" th:href="@{/governors}">Link6</a>
            <a class="h2" th:href="@{/statistics}">Link7</a>
        </div>
        <img src="/image2.png" class="side-img">
    </div>
</div>

第二步：添加对应CSS样式 #

.flex-box {
    display: flex;
    /* 垂直方向居中对齐所有子元素 */
    align-items: center;
    /* 子元素两端对齐：第一个靠左、最后一个靠右，中间元素自动居中 */
    justify-content: space-between;
    width: 100%;
    padding: 0 24px; /* 控制图片和容器边缘的距离，按需调整 */
    box-sizing: border-box;
}

.links-wrapper {
    /* 链接组内部垂直排列、水平居中 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px; /* 控制每个链接之间的垂直间距，按需调整 */
}

.links-wrapper .h2 {
    margin: 0;
    text-decoration: none;
    display: block;
}

实现逻辑 #

• 外层flex容器设置justify-content: space-between后，三个直接子元素会自动分配水平位置：左图贴左、右图贴右，中间链接容器自动占据两图之间的所有剩余空间
• 中间链接容器自身设置垂直flex布局，就能让所有链接在两图之间的区域垂直排列、整体居中
• 如果使用Bootstrap框架，也可以直接用内置的d-flex、justify-content-between、flex-column、align-items-center、gap-*工具类实现，不需要额外写自定义CSS。

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