CSS에서 이미지와 텍스트의 높이를 동일하게 만드는 방법

CSS에서 이미지와 텍스트의 높이를 동일하게 설정하는 방법: 1. CSS 속성 "vertical-align:middle;"을 추가합니다. 2. 이미지와 텍스트를 각각 div에 넣은 다음 margin 속성을 사용하여 이미지와 텍스트에 동일한 높이 효과가 적용됩니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3 버전, Dell G3 컴퓨터.

추천: css 비디오 튜토리얼

이미지와 텍스트를 같은 줄에 정렬하는 CSS

프론트 엔드 개발을 할 때 같은 줄에 img 태그와 텍스트를 자주 접하게 됩니다.

그래서 처음 시작할 때 위치 지정 레이아웃을 사용했습니다. (호환성을 조정해야 하며 비용 효율적이지 않습니다.) 다음은 몇 가지 다른 방법입니다.

1. align:middle ;

Code:

<style>
a img{border:none} .testdiv *{ vertical-align:middle; }
</style>
<div class="testdiv">
<a href="http://www.zc144.com/">
<img src="http://www.zc144.com/download/Template.jpg" alt="这里是图片"/>
</a>
<span>这里是文字,看看文字对齐了没</span>
</div>

각 개체의 수직 정렬 속성 설정, 속성 설명:

baseline－将支持valign特性的对象的内容与基线对齐 
sub－垂直对齐文本的下标 
super－垂直对齐文本的上标 
top－将支持valign特性的对象的内容与对象顶端对齐 
text-top－将支持valign特性的对象的文本与对象顶端对齐 
middle－将支持valign特性的对象的内容与对象中部对齐 
bottom－将支持valign特性的对象的文本与对象底端对齐 
text-bottom－将支持valign特性的对象的文本与对象顶端对齐

2.div 중첩: 그림과 텍스트를 각각 div에 넣습니다. 여백을 사용하여 익숙해질 수 있습니다. any positioning

code :

<style>
a img{border:none} .testIMG{ float:left; display:inline; margin-top:0; margin-left:5px; } .testTXT{ float:left; display:inline; margin-top:20; margin-left:5px; }
</style>
<div class="testdiv">
<div class="testIMG">
<a href="">
<img src="Template.jpg" alt="这里是图片"/></a>
</div>
<div class="testTXT">
<span>这里是文字,看看文字对齐了没</span>
</div>
</div>

3. 사진을 배경으로 사용:

사진이 텍스트 왼쪽에 배치되는 작은 아이콘으로만 사용되는 경우 이 방법을 권장합니다. 텍스트의 배경으로 설정하고 반복되지 않으며 왼쪽에 배치됩니다. 위쪽과 아래쪽을 중앙에 놓고 이미지 너비에 몇 픽셀을 추가하여 왼쪽에 텍스트를 채웁니다.

코드:

<style>
 a img{border:none} .testTXT{ height:60px; line-height:60px; padding-left:65px; background:url(http://www.zc144.com/download/Template.jpg) no-repeat left center }
</style>
<div class="testdiv">
<div class="testTXT">
<span>这里是文字,看看文字对齐了没</span>
</div>
</div>

위 내용은 CSS에서 이미지와 텍스트의 높이를 동일하게 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!