HTML에서 텍스트 이미지를 세로 중앙에 맞추는 방법

이번에는 html 텍스트사진을 세로로 가운데 맞추는 방법과 html 텍스트 사진을 세로로 가운데 맞추는 주의사항에 대해 알려드리겠습니다.

방법 1: 상자 높이를 줄 높이와 동일하게 설정합니다. 이 방법은 텍스트 줄에 적합합니다.

그림의 세로 중앙 정렬 및 텍스트 줄 정렬에 속성 사용vertical-align

작은 아이콘과 텍스트가 세로로 정렬되고 작은 아이콘이 배경으로 삽입됩니다.

// attr: 생성하는 속성을 설정합니다. 예를 들어 선택한 항목을 선택하면 마우스를 사용하십시오. 클릭한 값은 정의되지 않으므로 해당 속성에 prop을 사용하는 것이 좋습니다

Containing Block
요소의 크기 및 위치 계산은 종종 다음 요소에 의해 결정됩니다. 컨테이닝 블록은 요소가 위치한 곳으로, 컨테이닝 블록은 특정 요소 영역을 가리키는 것이 아니라 시각적으로 상상한 영역을 의미합니다. 일단 이해하면 요소를 쉽게 배치할 수 있습니다.
그럼 요소의 포함 블록이 어디에 있는지 어떻게 알 수 있나요?

초기 포함 블록
사용자 에이전트(예: 브라우저)는 루트 요소를 포함 블록(초기 포함 블록이라고 함)으로 선택합니다. html의 하위 요소에 다른 가까운 포함 블록이 없으면 위치 지정을 위해 초기 포함 블록에 의존합니다.
초기 포함 블록의 크기는 얼마입니까? 즉, html이 증가해도 뷰포트 크기, 높이는 증가하지 않습니다.

절대 위치가 아닌 요소의 경우 포함 블록은 가장 가까운 블록 수준 상위 요소 상자의 콘텐츠 경계로 구성됩니다.
콘텐츠 경계부터 시작하여 부동 요소에도 동일하게 적용됩니다.

절대 요소의 포함 블록은 위치가 정적이 아닌 가장 가까운 조상에 의해 설정됩니다.
사실 이는 절대 요소의 포함 블록이 인라인으로 생성되는지 아니면 블록 수준으로 생성되는지를 고려해야 합니다. 요소. 인라인 호환성이 상대적으로 낮기 때문에 일반적으로 인라인 요소에 블록 수준 요소를 포함하는 것을 피하므로 대부분의 포함 블록은 블록 수준 요소에서 생성됩니다.
포함 블록은 조상 테두리의 내부 경계에 의해 형성됩니다.

요소에 'position:fixed' 속성이 있는 경우 뷰포트에 의해 포함 블록이 생성됩니다.

Css 이미지 센터링은 CSS 이미지 수평 센터링과 수직 센터링의 두 가지 경우로 나뉩니다.

여기에 몇 가지 사항이 있습니다: 각 센터링 상황이 각각 소개됩니다:

CSS 이미지 수평 센터링

1. 이미지의 수평 센터링을 달성하려면 여백: 0 자동을 사용하세요.

여백: 0을 사용하세요. 이미지 중앙 정렬을 달성하려면 다음과 같이 CSS 스타일 margin: 0 auto를 이미지에 추가해야 합니다.

<div style="text-align: center; width: 500px; border: green solid 1px;">
<img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="margin: 0 auto;" /></div>

2. 텍스트의 수평 중앙 정렬 속성을 사용합니다. 수직 중심 맞추기

1. 높이 == 행 높이를 사용하여 이미지의 수직 중심 맞추기

이 방법은 높이를 사용할 수 있다는 점에 유의해야 합니다. 코드는 다음과 같습니다:

<div style="text-align: center; width: 500px; border: green solid 1px;"><img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="display: inline-block;" /></div>

2.

테이블을 사용하는 방법은 테이블의 수직 센터링 속성을 사용하는 것입니다. 코드는 다음과 같습니다.

여기에서는 display: table; 및 display: table-cell을 사용하여 테이블을 시뮬레이션합니다. /IE7은 디스플레이: 테이블을 지원하지 않습니다. 단점: 디스플레이: 테이블을 설정하면 절대 위치 지정을 사용하여 달성할 수 있습니다. 이미지의 수직 중앙 정렬

이미지의 너비와 높이를 알고 있는 경우 코드는 다음과 같습니다.

<div style="text-align: center; width: 500px;height:200px; line-height:200px; border: green solid 1px;">   
<img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="display: inline-block; vertical-align: middle;" /></div>

4 모바일 단말기는 flex 레이아웃을 사용하여 CSS 이미지의 수직 중앙 정렬을 구현할 수 있습니다

Mobile 일반 브라우저 버전 클라이언트측에서는 상대적으로 높기 때문에 flex Layout을 과감하게 사용할 수 있습니다. (flex Layout은 css3의 flex layout 사용법을 참고하세요.) 데모 코드는 다음과 같습니다.

css 코드:

<div style="text-align: center; width: 500px;height:200px; display: table;border: green solid 1px;">   <span style="display: table-cell; vertical-align: middle; ">
       <img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="display: inline-block;" />
   </span></div>

html 코드:

<div style="width: 500px;height:200px; position: relative; border: green solid 1px;">
    <img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="width: 120px; height: 40px;position: absolute; left:50%; top: 50%; margin-left: -60px;margin-top: -20px;" /></div>

읽어보셨을 거라 믿습니다. 이러한 경우의 방법을 숙지하셨으니 더 흥미로운 정보를 원하시면 PHP 중국어 웹사이트의 다른 관련 기사를 주목해 주세요!

관련 자료:

CSS 기본 구문의 세 가지 소개

CSS 레이아웃 상자 모델 속성

위 및 아래의 이미지와 뷰 태그 사이의 간격에 대한 솔루션

CSS 정보 블록

의 레벨 형식

위 내용은 HTML에서 텍스트 이미지를 세로 중앙에 맞추는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!