페이지를 작성하는 과정에서 작은 아이콘과 텍스트가 정렬되는 상황을 자주 접하게 됩니다. 예를 들면 다음과 같습니다.
🎜> 두 가지 방법을 요약합니다. 둘 다 더 적은 코드가 필요합니다.
첫 번째 유형 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!