컨테이너 Div 내의 수직 요소 정렬>

컨테이너 div 내에서 두 요소를 수직으로 정렬하려고 합니다. phrogz.net의 튜토리얼에서는 원하는 결과를 얻지 못했습니다. 이 문서에서는 세로 정렬을 달성하는 두 가지 효과적인 방법을 살펴봅니다.

CSS Flexbox를 사용하는 방법:

CSS Flexbox는 요소를 세로로 가운데에 배치하는 효율적인 방법을 제공합니다.

컨테이너 {

}

flex-direction을 'column'으로 설정하면 항목이 수직으로 쌓이고 'justify-content: center' 및 'align' -items: center'는 각각 수직 및 수평 센터링을 보장합니다.

CSS 테이블과 위치 지정:

이 방법에는 테이블 속성과 절대 위치 지정을 활용하는 작업이 포함됩니다.

<br>body {</p>
<p>}</p>
<h1>컨테이너 {</h1>
<p>}<br>

여기서는 body 요소를 테이블로 설정하고, 컨테이너 요소를 테이블 셀로 설정했습니다. 'vertical-align'을 'middle'로 설정하면 컨테이너가 본문 내에서 수직으로 정렬됩니다.

선택할 방법:

간단성과 효율성을 위해 Flexbox는 특히 광범위한 레이아웃 옵션과 반응형 특성으로 인해 권장됩니다. Flexbox는 IE의 이전 버전을 제외하고 브라우저에서도 널리 지원됩니다.

위 내용은 컨테이너 Div 내의 요소를 수직으로 정렬하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!