집 > 기사 > 웹 프론트엔드 > 내부를 수직으로 정렬하는 방법은 무엇입니까?

내부를 수직으로 정렬하는 방법은 무엇입니까?

Linda Hamilton원래의: 2024-10-28 02:22:01521검색

How to Vertically Align a Inside a ?

세로로

다음 상황을 고려해보세요. 다음 코드에서 볼 수 있듯이

내에 중첩되어 있습니다.

<div 
  id="theMainDiv"
  style="
    border:solid 1px gray;
    cursor:text;
    width:400px;
    padding:0px;"
>
  <span 
    id="tag1_outer" 
    style="
      background:#e2e6f0;
      padding-right:4px;
      padding-left:4px;
      border:solid 1px #9daccc;
      font:normal 11px arial;
      color:#3c3c3c"
  >as</span>
</div>

기본적으로

의 왼쪽 하단 모서리에 정렬됩니다.

세로 방향으로는 다음 접근 방식을 고려하세요.

옵션 1: 줄 높이 조작

하위 항목 의 줄 높이 설정

#theMainDiv {
  height: 20px; /* Set the div height for reference */
}

#tag1_outer {
  line-height: 20px;
}

옵션 2: 절대 위치 지정

높이에 절대 위치 지정을 적용합니다. 컨테이너. 그런 다음 하위 절대적으로 top:50%에 있고 margin-top:-YYYpx를 사용합니다. 여기서 YYY는 알려진 어린이 키의 절반을 나타냅니다.

#theMainDiv {
  position: relative; /* Apply relative positioning to the div */
}

#tag1_outer {
  position: absolute;
  top: 50%;
  margin-top: -10px; /* Half the height of the child span */
}

자세한 내용과 추가 기술은 수직 정렬 이해에 대해 제공된 문서를 참조하세요. .

위 내용은 내부를 수직으로 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

for default this position margin

성명：

이전 기사：CSS를 사용하여 텍스트를 더 크게 표시하지 않고 세로로 늘릴 수 있나요?다음 기사：CSS를 사용하여 텍스트를 더 크게 표시하지 않고 세로로 늘릴 수 있나요?