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

高洛峰
풀어 주다: 2017-03-09 10:15:04
원래의
2169명이 탐색했습니다.

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

                                                                            🎜>CSS 아이콘과 텍스트 정렬을 위한 두 가지 구현 방법에 대한 설명 두 가지 방법을 요약합니다. 둘 다 더 적은 코드가 필요합니다.

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

<p>
        <img src="" alt="" class="heart">
        <span>1169</span>
        <img src="" alt="" class="comment">
        <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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!