CSS 아이콘을 텍스트와 정렬하는 방법

다음은 CSS 아이콘과 텍스트를 정렬하는 두 가지 방법을 제공합니다. 내용이 꽤 괜찮아서 지금 공유해서 모두에게 참고용으로 드리고 싶습니다.

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

                                                                                                                          수량이 상대적으로 적습니다.

첫 번째

　　 img의 세로 정렬을 가운데로 설정하세요.

XML/HTML

<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>

XML/HTML

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

두 번째 유형

작은 아이콘을 배경 이미지로 사용하고 패딩을 조정하세요.

XML/HTML

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

JavaScript

.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;    
}

위는 이 글의 전체 내용입니다. 더 많은 관련 내용을 알아보는 데 도움이 되기를 바랍니다. , PHP 중국어 넷에 주목해주세요!

관련 권장 사항:

CSS를 사용하여 선택 드롭다운 화살표를 제거하는 방법

위 내용은 CSS 아이콘을 텍스트와 정렬하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!