圖片垂直居中方法----待續

圖片的父元素添加

display: flex;

align-items: center;

<div class="ppb_server clearfix">
            <div class="title">貝拍服務</div>
            <ul>
                <li>
                    <img src="./images/yhkq.png" alt="">
                    <span>優惠卡券</span>
                </li>
            </ul>
        </div>
.ppb_server {
    margin-top: px1rem(20px);
    .title {
        @include title();
    }
    ul {

        li {
            width: px1rem(147px);
            height: px1rem(54px);
            line-height: px1rem(54px);
            border: 0.5px solid #e7e7e7;
            border-radius: px1rem(10px);
            display: flex;
            align-items: center;
        }
        li:nth-of-type(1) img {
            width: px1rem(36px);
            height: px1rem(27px);
            vertical-align: center;
            margin-left: px1rem(30px);
            margin-right: px1rem(5px);

        }
    }
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章