css3 实现两端对齐

xiaoxiao2025-10-05  26

HTML: 

<ul class="person-info"> <li> <div class="photo"> <img src="../../../assets/img/Path.png" alt=""> <span class="img-title">头像</span> </div> </li> </ul>

 CSS:

<style lang="less" scoped> .photo{ display: flex; //两端对齐 -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack:justify ; justify-content: space-between; //文本上下对齐 align-items: center; img{ width: 1.333333rem; height: 1.333333rem; } .img-title{ margin-right: .4rem; color: rgb(102, 102, 102); font-size: .426667rem; } } </style>

效果:

转载请注明原文地址: https://www.6miu.com/read-5037428.html

最新回复(0)