css用flex实现字体垂直居中对齐

最新推荐文章于 2024-06-02 17:14:20 发布

不成功

最新推荐文章于 2024-06-02 17:14:20 发布

阅读量3.2k

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_60122365/article/details/127606915

版权

实现前

可以看出字体与图片并未垂直居中

实现也很简单只需要在父元素中添加

display: flex;（让字体与图片水平排布，并且定义了为flex布局）

flex-flow: column;（让字体与图片垂直排布）

align-items: center;（让字体与图片居中排布）

即可实现

实现后

<div class="container2">
            <div class="container2-top">
                <h3>我的常用</h3>
                <span>&gt;</span>
                <span>展开全部</span>
            </div>
            <div class="container2-center">
                <div><img src="img/组 19@2x(3).png" alt="">
                    <div>直播课程</div>
                </div>
                <div><img src="img/组 20@2x.png" alt="">
                    <div>离线课程</div>
                </div>
                <div><img src="img/组 19@2x.png" alt="">
                    <div>家长监管</div>
                </div>
                <div><img src="img/组 19@2x(1).png" alt="">
                    <div>在线解题</div>
                </div>
                <div><img src="img/组 19@2x(2).png" alt="">
                    <div>签到福利</div>
                </div>

            </div>
            <div class="container2-bottom">
                <div>
                    <img src="img/5004283@2x.png" alt="">
                    <div>直播教育·七年级英语</div>
                </div>
                <div>
                    <img src="img/m5037851@2x.png" alt="">
                    <div>初中数学进阶套装集</div>
                </div>
            </div>

   .container2 {
        position: absolute;
        width: 94.9333vw;
        height: 58.9333vw;
        background: #FFFFFF;
        border-radius: 2.6667vw;
        left: 3vw;
        top: 18vw;

        .container2-top {
            padding-top: 3.7333vw;

            h3 {
                display: inline-block;
                color: #333333;
                margin-left: 4.5333vw;
            }

            span {
                &:nth-child(2) {
                    float: right;
                    color: #808080;
                    margin-right: 3.2vw;
                    margin-top: -1vw;
                }
            }

            span {
                &:nth-child(3) {
                    float: right;
                    color: #808080;
                    font-size: 3.7333vw;
                    margin-right: 2vw;
                }
            }
        }

        .container2-center {
            display: flex;
            justify-content: space-around;

            div {
                display: flex;
                flex-flow: column;
                align-items: center;

                img {
                    width: 9.0667vw;
                    height: 9.0667vw;
                }

                div {
                    margin-top: 2vw;
                    color: #333333;
                    font-size: 2.9333vw;
                }
            }

        }

        .container2-bottom {
            display: flex;
            justify-content: space-around;

            div {
                display: flex;
                flex-flow: column;
                align-items: center;

                img {
                    width: 41.8667vw;
                    height: 21.3333vw;
                    border-radius: 1.3333vw;
                }

                div {
                    margin-top: 1.6667vw;
                    font-size: 3.4667vw;
                    color: #333333;
                }
            }
        }

    }