HTML에서 요소를 중앙에 배치할 때 무엇에 주의해야 합니까?

이번에는 HTML에서 요소를 중앙에 배치할 때 주의해야 할 사항을 알려드리겠습니다. 다음은 실제 사례입니다.

위치 지정을 사용하지 마세요

　가로 중심 정렬: text-align = center; (상속 가능)

　　세로 중심 정렬: margin: 0 auto; (블록 수준 요소)

　　기타 중심 정렬: 1. 텍스트 중심 정렬: 상위 요소 하위 요소의 높이 설정 line-height=height (상위 요소)

　　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　　 　　　 　　　　　　　　　　　　　　　　　　　　　　　　 　　 2. 그림 중앙에 위치: 수직 정렬: 중간;-- 그림 요소에 배치해야 함

.first{
    width: 300px;
    height: 100px;
    background-color: black;
    color: white;
    text-align: center;
    margin: 0 auto; //针对块级元素
  }

<div class="first">
不使用定位（1）
</div>

.second{
    width: 300px;
    height: 100px;
    background-color: green;
  }
  .s_child{
    width: 150px;
    line-height: 100px;
  }
<div class="second">    
<div class="s_child">   
   不使用定位（2）    
</div> 
</div>

2. 포지셔닝 및 centering

　a.상위 요소는 고정된 높이를 가집니다. 상위 요소: 상대 위치 지정

. 하위 요소: 절대 위치 지정

. 높이의 절반(빼기 기호 추가)

　　　

margin-left

: 절반 자체 너비(빼기 기호 추가)

.dw_one{
      width: 600px;
      height: 300px;
      position: absolute;
      background: black;
    }
    .dw_one_child{
      background: white;
      position: relative;
      width: 50px;
      height: 50px;
      top: 50%;
      left: 50%;
      margin-top: -25px;
      margin-left: -25px;
    }
    <div class="dw_one">
    <div class="dw_one_child">
      a    
    </div>
    </div>

　b. 상위 요소의 높이가 고정되어 있지 않습니다.

.wrapper{
      width: 600px;
      height: 600px;
    }
    .dw_two{
      width: 100%;
      height: 100%;
      position: absolute;
      background: black;
    }
    .dw_two_child{
      background: white;
      position: relative;
      top: 50%;
      left: 50%;
      width: 100px;
      height: 100px;
      transform:translate(-50%, -50%);
      -moz-transform:translate(-50%, -50%);
      -ms-transform:translate(-50%, -50%);
      -o-transform:translate(-50%, -50%);
      -webkit-transform:translate(-50%, -50%);
    }
    <div class="wrapper">
  <div class="dw_two">
      <div class="dw_two_child">
        a
      </div>
  </div>
</div>

　3. 여러 줄 텍스트의 중앙 정렬에 관해

　display: table;

　　

vertical-align

:Centered

#outer{
           width: 200px;
           height: 200px;
           background: #cccccc;
           display: table;
           _position: relative;   // "_"为了兼容IE6
       }
       #inner{
           display: table-cell;
           vertical-align: middle;
           _position: absolute;
           _top: 50%;
       }
       #content{
           _position: relative;
           _top: -50%;
       }
<div id="outer">
     <div id="inner">
       <div id="content">
          Paradise_追逐者所写的居中问题总结之我见
       </div>
    </div>
</div>

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

HTML과 유사한 명령줄 인터페이스를 구현하는 방법

meta name="" content="사용 방법

위 내용은 HTML에서 요소를 중앙에 배치할 때 무엇에 주의해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!