텍스트 내 이미지의 수직 정렬

이 예에서는 다음을 보여줍니다.

이미지에서 텍스트의 세로 정렬을 설정하는 방법.

예제 분석:

vertical-align 속성은 요소의 수직 정렬을 설정합니다.

설명: 수직 정렬 속성은 요소가 있는 행의 기준선을 기준으로 인라인 요소 기준선의 수직 정렬을 정의합니다. 음수 길이 값과 백분율 값을 지정할 수 있습니다. 이렇게 하면 요소가 높아지는 대신 요소가 낮아집니다. 테이블 셀에서 이 속성은 셀 상자의 셀 내용 정렬을 설정합니다.

다음 속성 값을 설정할 수 있습니다.

● 기준선: 기본값, 요소는 상위 요소의 기준선에 배치됩니다.

　● Sub: 세로로 정렬된 텍스트의 아래 첨자입니다.

●Super: 텍스트의 위 첨자를 수직으로 정렬

●top: 요소의 상단을 행에서 가장 높은 요소의 상단과 정렬

● Text-top: 텍스트의 상단 정렬 상위 요소의 글꼴이 있는 요소 위쪽 정렬

　●middle: 이 요소를 상위 요소의 중앙에 배치합니다.

● 하단: 요소의 하단을 행의 가장 낮은 요소의 상단과 정렬합니다.

● 텍스트 하단: 요소의 하단을 상위 요소의 글꼴 하단과 정렬합니다.

●　length:

●　●　%: "line-height" 속성의 백분율 값을 사용하여 이 요소를 정렬합니다. 음수 값이 허용됩니다.

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> img.top {vertical-align:text-top;} img.bottom {vertical-align:text-bottom;} </style> </head> <body> <p>一个<img src="https://img.php.cn/upload/article/000/000/015/5c67d9134b166854.png" alt="w3cschool" width="150" height="50" />默认对齐的图像。</p> <p>一个<img class="top" src="https://img.php.cn/upload/article/000/000/015/5c67d9134b166854.png" alt="w3cschool" width="150" height="50" /> text-top 对齐的图像。</p> <p>一个<img class="bottom" src="https://img.php.cn/upload/article/000/000/015/5c67d9134b166854.png" alt="w3cschool" width="150" height="50" /> text-bottom 对齐的图像。</p> </body> </html>

코드 재설정

자동운전

제출하다

시사 Clear