flex设置一行文字居中，两行或者多行同样居中

最新推荐文章于 2025-03-20 12:11:26 发布

viaChanging

最新推荐文章于 2025-03-20 12:11:26 发布

阅读量8k

点赞数

分类专栏： CSS HTML

本文链接：https://blog.csdn.net/viaChanging/article/details/79387130

版权

CSS 同时被 2 个专栏收录

1 篇文章

订阅专栏

HTML

1 篇文章

订阅专栏

这里写图片描述

HTML 部分

<ul class="test">
        <li class="item">
            <div class="left">
            </div>
            <div class="right">
                <div class="content">我是第一行</div>
                <div class="content second">我是第二行</div>
            </div>

        </li>

        <li class="item">
            <div class="left">
            </div>
            <div class="right">
                <div class="content">我是第一行</div>
            </div>

        </li>
    </ul>

CSS 部分

.test {
    width: 300px;
    margin: 0 auto;
}

.item {
    height: 40px;
    display: flex;
}

.left {
    flex: 1;
    height: 40px;
    border: 1px solid red;
    background-color: yellow;
}

.right {
    flex: 1;
//----垂直方向自动居中---//
    display: flex;
    justify-content: center;
    flex-direction: column;
//------------------------------//
    height: 40px;
    border: 1px solid black;
    background-color: green;
}

.content {
    font-size: 15px;
    text-align: center;
    height: 20px;
    line-height: 20px;
}

.second {
    background-color: blueviolet;
}