使用Flexbox实现标题、内容左右布局及内容居中对齐-html教程-PHP中文网

使用Flexbox实现标题、内容左右布局及内容居中对齐

心靈之曲

发布： 2025-09-25 15:31:01

原创

671人浏览过

使用flexbox实现标题、内容左右布局及内容居中对齐

本文旨在指导开发者如何使用Flexbox实现一个包含标题、左右两个内容区域的布局，并确保右侧内容区域相对于主容器居中对齐。我们将探讨两种实现方式，并通过示例代码详细讲解其实现原理和优缺点。

方案一：调整HTML结构，将标题融入右侧内容区域

这种方案的核心思想是避免使用单独的标题容器，而是将标题作为右侧内容区域的一部分，从而简化对齐操作。

HTML结构：

标书对比王

标书对比王是一款标书查重工具，支持多份投标文件两两相互比对，重复内容高亮标记，可快速定位重复内容原文所在位置，并可导出比对报告。

查看详情

<div class="main">
    <div class="container">
        <div class="info">
            <div class="league">
                <img src="https://image.similarpng.com/very-thumbnail/2020/12/Lorem-ipsum-logo-isolated-clipart-PNG.png">
                <span class="text-info">League</span>
            </div>

            <div class="stadium-date">
                <span class="text-info">Stadium, Location</span>
                <span class="date-info">26.06.2022</span>
                <img src="https://image.similarpng.com/very-thumbnail/2020/12/Lorem-ipsum-logo-isolated-clipart-PNG.png">
            </div>
        </div>

        <div class="match-display">
            <span class="title">
                NEXT MATCH
            </span>
            <div class="match">
                <img src="https://image.similarpng.com/very-thumbnail/2020/12/Lorem-ipsum-logo-isolated-clipart-PNG.png">
                VS.
                <img src="https://image.similarpng.com/very-thumbnail/2020/12/Lorem-ipsum-logo-isolated-clipart-PNG.png">
            </div>

            <div class="match main-match">
                <img src="https://image.similarpng.com/very-thumbnail/2020/12/Lorem-ipsum-logo-isolated-clipart-PNG.png">
                VS.
                <img src="https://image.similarpng.com/very-thumbnail/2020/12/Lorem-ipsum-logo-isolated-clipart-PNG.png">
            </div>

            <div class="match">
                <img src="https://image.similarpng.com/very-thumbnail/2020/12/Lorem-ipsum-logo-isolated-clipart-PNG.png">
                VS.
                <img src="https://image.similarpng.com/very-thumbnail/2020/12/Lorem-ipsum-logo-isolated-clipart-PNG.png">
            </div>
        </div>
    </div>
</div>

登录后复制

CSS样式：

.main{
    background-color:red;
    text-align: center; /* 仅用于标题居中，其他内容由Flexbox控制 */
}

.container{
    display: flex; /* 使用Flexbox布局 */
}

.info{
    flex: 1; /* 左侧内容占据剩余空间 */
    text-align: center; /* 内容居中 */
}

.match-display{
    flex: 1; /* 右侧内容占据剩余空间 */
    text-align: center; /* 关键：使右侧内容相对于.main居中 */
}

.match{
    display: flex;
    justify-content: center;
    align-items: center;
}

.match img{
    width: 5%;
}

.main-match{
    border-style: solid;
    border-width: 3px;
    border-image: linear-gradient(to left, red 0%, red 25%, black 50%, red 75%, red 100%) 100% 0 100% 0/3px 0 3px 0 stretch;
}

登录后复制

关键点：

.container 使用 display: flex 创建 Flexbox 容器。
.info 和 .match-display 使用 flex: 1 均分剩余空间。
.match-display 的 text-align: center 使得其内部内容（包括标题和比赛信息）相对于 .main 容器居中。

优点： 结构清晰，易于理解和维护。

缺点： 牺牲了标题的独立性，可能会在某些场景下造成不便。

方案二：绝对定位左侧内容，撑开右侧内容

此方案将左侧 .info 元素设置为绝对定位，从而允许右侧 .match-display 元素占据整个宽度，并利用 text-align: center 实现居中对齐。

HTML结构：

<div class="main">
    <span class="title">
        NEXT MATCH
    </span>
    <div class="container">
        <div class="info">
            <div class="league">
                <img src="https://image.similarpng.com/very-thumbnail/2020/12/Lorem-ipsum-logo-isolated-clipart-PNG.png">
                <span class="text-info">League</span>
            </div>

            <div class="stadium-date">
                <span class="text-info">Stadium, Location</span>
                <span class="date-info">26.06.2022</span>
                <img src="https://image.similarpng.com/very-thumbnail/2020/12/Lorem-ipsum-logo-isolated-clipart-PNG.png">
            </div>
        </div>

        <div class="match-display">
            <div class="match">
                <img src="https://image.similarpng.com/very-thumbnail/2020/12/Lorem-ipsum-logo-isolated-clipart-PNG.png">
                VS.
                <img src="https://image.similarpng.com/very-thumbnail/2020/12/Lorem-ipsum-logo-isolated-clipart-PNG.png">
            </div>

            <div class="match main-match">
                <img src="https://image.similarpng.com/very-thumbnail/2020/12/Lorem-ipsum-logo-isolated-clipart-PNG.png">
                VS.
                <img src="https://image.similarpng.com/very-thumbnail/2020/12/Lorem-ipsum-logo-isolated-clipart-PNG.png">
            </div>

            <div class="match">
                <img src="https://image.similarpng.com/very-thumbnail/2020/12/Lorem-ipsum-logo-isolated-clipart-PNG.png">
                VS.
                <img src="https://image.similarpng.com/very-thumbnail/2020/12/Lorem-ipsum-logo-isolated-clipart-PNG.png">
            </div>
        </div>
    </div>
</div>

登录后复制

CSS样式：

.main{
    background-color:red;
    text-align: center;
    position: relative; /* 为绝对定位的子元素提供定位上下文 */
}

.container{
    display: block; /* 移除Flexbox布局 */
}

.info{
    position: absolute; /* 绝对定位 */
    left: 0; /* 贴靠左侧 */
    top: 50px; /* 调整垂直位置，避免遮挡标题 */
}

.match-display{
    text-align: center; /* 居中对齐 */
    width: 100%; /* 占据整个宽度 */
}

.match{
    display: flex;
    justify-content: center;
    align-items: center;
}

.match img{
    width: 5%;
}

.main-match{
    border-style: solid;
    border-width: 3px;
    border-image: linear-gradient(to left, red 0%, red 25%, black 50%, red 75%, red 100%) 100% 0 100% 0/3px 0 3px 0 stretch;
}

登录后复制

关键点：

.main 容器需要设置 position: relative，以便作为 .info 绝对定位的参考。
.info 使用 position: absolute 和 left: 0 实现左侧贴靠。
.match-display 的 width: 100% 使其占据整个宽度，text-align: center 实现内容居中。

优点： 保持了标题的独立性，布局更灵活。

缺点： 绝对定位可能会导致布局复杂化，需要仔细调整各个元素的位置。

注意事项：

使用绝对定位时，需要确保 .info 元素不会遮挡其他内容，并根据实际情况调整其 top 值。

总结

本文介绍了两种使用Flexbox实现标题、内容左右布局及内容居中对齐的方法。第一种方法通过调整HTML结构，将标题融入右侧内容区域，实现简单快捷的居中对齐。第二种方法使用绝对定位，保持了标题的独立性，但需要更精细的布局调整。开发者可以根据实际需求选择合适的方案。在实际应用中，还可以结合其他CSS技术，如Grid布局，实现更复杂的布局效果。

以上就是使用Flexbox实现标题、内容左右布局及内容居中对齐的详细内容，更多请关注php中文网其它相关文章！