"일꾼이 일을 잘하려면 먼저 도구를 갈고 닦아야 한다." - 공자, 『논어』.
첫 장 > 프로그램 작성 > 내부를 수직으로 정렬하는 방법은 무엇입니까?

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

2024-11-09에 게시됨
검색:864

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 */
}

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

최신 튜토리얼 더>

부인 성명: 제공된 모든 리소스는 부분적으로 인터넷에서 가져온 것입니다. 귀하의 저작권이나 기타 권리 및 이익이 침해된 경우 자세한 이유를 설명하고 저작권 또는 권리 및 이익에 대한 증거를 제공한 후 이메일([email protected])로 보내주십시오. 최대한 빨리 처리해 드리겠습니다.

Copyright© 2022 湘ICP备2022001581号-3