CSS 아이콘과 텍스트 정렬을 위한 두 가지 구현 방법에 대한 설명

페이지를 작성하는 과정에서 작은 아이콘과 텍스트가 정렬되는 상황을 자주 접하게 됩니다. 예를 들면 다음과 같습니다.

                                                                            🎜> 두 가지 방법을 요약합니다. 둘 다 더 적은 코드가 필요합니다.

첫 번째 유형　img의 세로 정렬을 가운데로 설정,

<p>
        <img class="heart lazy"  src="/static/imghwm/default1.png"  data-src="" alt="   alt="" >
        <span>1169</span>
        <img class="comment lazy"  src="/static/imghwm/default1.png"  data-src="" alt="   alt="" >
        <span>1168</span>
</p>

p{    
     height:30px;    
     line-hight:30px;    
}    
.heart,.comment{    
        vertical-align:middle;    
}

두 번째 유형작은 아이콘을 배경 이미지로 설정하고 패딩을 조정

<p>
        <span class="heart">1169</span>
        <span class="comment">1168</span>
</p>

.hear{    
        background:url(images/heart.png) left center no-repeat;    
        margin-right:20px;    
}    
.comment{    
        background:url(images/comment.png) left center no-repeat;    
}    
.hear,.comment{    
        height:30px;    
        line-height:30px;    
        padding-left:20px;    
}

CSS 아이콘과 텍스트를 정렬하는 위의 두 가지 방법은 모두 편집자가 공유한 내용이므로 참고가 되셨으면 좋겠습니다. 모두가 PHP 중국어 웹사이트를 지지하게 될 것입니다.

위 내용은 CSS 아이콘과 텍스트 정렬을 위한 두 가지 구현 방법에 대한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!