使用Flexbox实现标题居中、内容分栏布局-html教程-PHP中文网

使用Flexbox实现标题居中、内容分栏布局

花韻仙語

发布： 2025-09-25 18:22:12

原创

1000人浏览过

使用flexbox实现标题居中、内容分栏布局

本文旨在指导开发者如何利用Flexbox技术实现一种常见的网页布局：顶部标题居中，下方内容区域分为左右两栏，且右侧内容相对于主容器居中对齐。我们将探讨两种实现方案，并分析各自的优缺点，帮助你选择最适合的方案。

方案一：调整HTML结构

这种方案的核心思路是将标题与右侧内容区域（match-display）整合到一个独立的容器中，从而方便对齐。

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;
}

.container{
    display: flex;
    /* align-items: center;  可以移除，因为标题已经放在match-display中了*/
    /* justify-content: center; 可以移除，因为不需要container居中*/
}

.title{
    display: block; /* 确保标题是块级元素 */
}

.league{
    display: flex;
    align-items: center;
}

.stadium-date{
    display:flex;
    flex-direction: column;
    align-items: center;
}

.info{
    flex: 1;
    text-align: center;
}

.info img{
    width: 50%;
}

.match-display{
    flex: 1;
    text-align: center; /* 关键：使 match-display 中的内容居中 */
}

.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上的align-items: center和justify-content: center，因为我们不再需要container自身居中。
在.match-display中添加text-align: center，这会将该容器内的所有内容（包括标题和比赛信息）水平居中。

优点：

结构简单，易于理解和维护。
利用text-align: center实现居中，代码简洁。

缺点：

需要修改HTML结构，如果HTML结构已经很复杂，修改起来可能会比较麻烦。

方案二：绝对定位

这种方案利用绝对定位将左侧内容区域（info）脱离文档流，然后让右侧内容区域（match-display）占据整个宽度，并使用text-align: center实现居中。

慧中标AI标书

慧中标AI标书是一款AI智能辅助写标书工具。

120

查看详情

HTML结构：

保持原始的HTML结构不变。

CSS样式：

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

.container{
    display: flex;
}

.title{
    display: block;
}

.league{
    display: flex;
    align-items: center;
}

.stadium-date{
    display:flex;
    flex-direction: column;
    align-items: center;
}

.info{
    flex: 1;
    text-align: center;
    position: absolute; /* 关键：脱离文档流 */
    left: 0;
    width: 30%; /* 根据实际情况调整宽度 */
}

.info img{
    width: 50%;
}

.match-display{
    flex: 1;
    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的绝对定位相对于.main。
为.info添加position: absolute，使其脱离文档流，并设置left: 0和width。
为.match-display添加width: 100%，使其占据整个宽度。

优点：

无需修改HTML结构。

缺点：

使用了绝对定位，可能会影响布局的灵活性和响应式设计。
需要手动调整.info的宽度，以确保布局正确。

总结

本文介绍了两种使用Flexbox实现标题居中、内容分栏布局的方案。第一种方案通过调整HTML结构，利用text-align: center实现居中，代码简洁易懂。第二种方案使用绝对定位，无需修改HTML结构，但可能会影响布局的灵活性。选择哪种方案取决于你的具体需求和项目情况。建议优先考虑第一种方案，因为它更简洁、易于维护。如果HTML结构难以修改，可以考虑使用第二种方案，但需要注意绝对定位带来的潜在问题。

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