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

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

本文旨在解决使用Flexbox布局时，如何实现一个标题位于顶部，下方分为左右两部分内容区域，且右侧内容区域中的元素相对于主容器居中对齐的问题。我们将探讨多种实现方案，并通过代码示例详细讲解每种方案的优缺点，帮助开发者选择最适合的布局方式。

方案一：调整HTML结构

一种实现方式是将标题移动到右侧内容区域，从而简化对齐逻辑。

HTML结构：

<div class="main">
    <div class="container">
        <div class="info">
            <div class="league">
                @@##@@
                <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>
                @@##@@
            </div>
        </div>

        <div class="match-display">
            <span class="title">NEXT MATCH</span>
            <div class="match">
                @@##@@
                VS.
                @@##@@
            </div>

            <div class="match main-match">
                @@##@@
                VS.
                @@##@@
            </div>

            <div class="match">
                @@##@@
                VS.
                @@##@@
            </div>
        </div>
    </div>
</div>

CSS样式：

.main{
    background-color:red;
    text-align: center;
}

.container{
    display: flex;
    align-items: flex-start; /* 修改 align-items 为 flex-start */
    justify-content: center;
}

.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; /* 添加 text-align: center; */
}

.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修改为flex-start，确保左右两部分内容从顶部开始对齐。
在.match-display中添加text-align: center，使其内部元素居中对齐。

优点：

实现简单，易于理解。

缺点：

改变了原有的HTML结构，可能不适用于所有场景。

方案二：绝对定位

另一种方法是使用绝对定位将左侧信息区域定位，并允许右侧内容区域占据全部宽度，并使用text-align: center居中对齐。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

HTML结构：

保持原始的HTML结构不变。

CSS样式：

.main{
    background-color:red;
    text-align: center;
    position: relative; /* 添加 position: relative; */
}

.container{
    display: flex;
    /* align-items: center;  移除 align-items */
    justify-content: center;
}

.title{
    display: block;
}

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

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

.info{
    /* flex: 1;  移除 flex: 1 */
    text-align: center;
    position: absolute; /* 添加 position: absolute; */
    left: 0;
    top: 50px; /* 根据实际情况调整 */
}

.info img{
    width: 50%;
}

.match-display{
    flex: 1;
    text-align: center; /* 添加 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;
}

说明：