HTML/CSS의 `` 컨테이너 내에서 `` 요소를 어떻게 수직으로 중앙에 배치합니까?

div 내에서 수직으로

HTML/CSS에서 일반적인 작업은 div 컨테이너 내에서 범위 요소를 수직으로 가운데에 배치하는 것입니다. 그러나 표준 기술을 사용하여 이러한 정렬을 달성하는 것은 어려울 수 있습니다.

이 문제를 해결하려면 제공된 예제 코드를 고려해 보겠습니다.

<code class="html"><div id="theMainDiv" style="...">
  <span id="tag1_outer" style="...">as</span>
</div></code>

이 코드가 렌더링되면 범위 요소 div의 왼쪽 하단 모서리에 정렬됩니다. 수직으로 중앙에 배치하려면 다음 기술 중 하나를 선택할 수 있습니다.

• 하위 항목의 줄 높이를 컨테이너의 높이로 설정합니다. 이 방법에는 다음에 대한 지식이 필요합니다. 컨테이너의 높이. 범위 요소의 줄 높이를 동일한 값으로 설정하면 범위 내에서 텍스트를 효과적으로 세로 중앙에 배치할 수 있습니다.
• 절대적으로 하위 위치를 지정하고 margin-top을 사용합니다. 이 접근 방식에는 다음이 포함됩니다. 컨테이너에 절대 위치 지정을 설정하고 그 안에 범위 요소를 절대 위치 지정합니다. 그런 다음 범위의 상단 속성을 50%로 설정하고 범위 높이의 절반에 해당하는 음수 여백 상단을 적용합니다. 이 기법을 사용하면 컨테이너의 높이와 관계없이 스팬을 수직으로 중앙에 맞출 수 있습니다.

수직 정렬에 대한 포괄적인 설명은 링크된 수직 정렬 이해에 대한 기사를 참조하세요.

위 내용은 HTML/CSS의 `` 컨테이너 내에서 `` 요소를 어떻게 수직으로 중앙에 배치합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!