css样式flex布局之，盒子垂直居中

乐容

已于 2024-07-22 15:14:27 修改

阅读量221

点赞数 3

文章标签： css 前端 javascript

于 2024-07-04 11:52:10 首次发布

本文链接：https://blog.csdn.net/m0_61265297/article/details/140175641

版权

               <div class="item">
                <img src="../../assets/images!code_app.png" alt="" />
                <div>
                    5555</div>
                <p>微信扫一扫关注</p>
                <p>“快速预约挂号”</p>
              </div>




.item{

         display: flex;
//主轴方向为垂直方向
        flex-direction: column;
//每一项居中
        align-items: center;
     img {
          width: 130px;
          height: 130px;
        }
        p {
          margin: 5px 0px;
        }
    }

效果，一个盒子内的元素都居中