텍스트 정렬을위한 브라우저 접두사가 다른 동작을하는 이유는 무엇입니까?

Question

<div> 사이에 가로 여백이있는 태그를 세로로 가운데에 맞추고 싶습니다.

.parent { 
 
    display: inline-block; 
 
    border: 1px dotted #fd0; 
 
    position: relative; 
 
} 
 
.parent.ta { 
 
    text-align: center; 
 
} 
 
.parent.browser-ta { 
 
    text-align: -webkit-center; 
 
    text-align: -moz-center; 
 
} 
 
.child { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 
.child > .content { 
 
    display: block; 
 
    margin: 0 10px; 
 
    border: 1px solid #888; 
 
    width: 200px; 
 
    text-align: left; 
 
} 
 
.wrong { 
 
    background-color: #e00; 
 
    color: #fff; 
 
} 
 
.right { 
 
    background-color: #0a3; 
 
    color: #fff; 
 
}

<div> 
 
    Using <tt>text-align: center</tt>; 
 
    <div class="parent ta"> 
 
    <div class="child"> 
 
     <div class="content wrong">child 1 LEFT</div> 
 
     <div class="parent ta"> 
 
     <div class="child"> 
 
      <div class="content">child a</div> 
 
     </div> 
 
     <div class="child"> 
 
      <div class="content">child b</div> 
 
     </div> 
 
     <div class="child"> 
 
      <div class="content">child c</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="child"> 
 
     <div class="content wrong">child 2 LEFT</div> 
 
     <div class="parent ta"> 
 
     <div class="child"> 
 
      <div class="content">child d</div> 
 
     </div> 
 
     <div class="child"> 
 
      <div class="content">child e</div> 
 
     </div> 
 
     <div class="child"> 
 
      <div class="content">child f</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="child "> 
 
     <div class="content right">child 3 CENTRE</div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<br> 
 
<br> 
 
<div> 
 
    Using <tt>text-align: -vendor-center</tt> 
 
    <div class="parent browser-ta"> 
 
    <div class="child"> 
 
     <div class="content right">child 1 CENTRE</div> 
 
     <div class="parent browser-ta"> 
 
     <div class="child"> 
 
      <div class="content">child a</div> 
 
     </div> 
 
     <div class="child"> 
 
      <div class="content">child b</div> 
 
     </div> 
 
     <div class="child"> 
 
      <div class="content">child c</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="child"> 
 
     <div class="content right">child 2 CENTRE</div> 
 
     <div class="parent browser-ta"> 
 
     <div class="child"> 
 
      <div class="content">child d</div> 
 
     </div> 
 
     <div class="child"> 
 
      <div class="content">child e</div> 
 
     </div> 
 
     <div class="child"> 
 
      <div class="content">child f</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="child"> 
 
     <div class="content right">child 3 CENTRE</div> 
 
    </div> 
 
    </div>

실행 니펫을 두 유사한 HTML 및 CSS (크롬에서 다른 레이아웃을 생성 :

문제는이 동작을 text-align: center 및 text-align: -webkit-center 또는 text-align: -moz-center 사이에 일치하지 않는 것으로 보인다이다 웹킷/블링크) 및 파이어 폭스. 빨간색 패널이 잘못된 위치에 있으며 녹색 패널이 올바 른 것입니다.

그래서 text-align: -webkit-center과 text-align: -moz-center은 정확하지만 나에게 맞는 것으로 보이지만 두 브라우저 모두에서 text-align: center이 도청 된 것처럼 보입니다.

오래 전의 <centre> 태그를 파헤 치고 사용하는 것이 좋습니다. 제대로 작동하는 것으로 간주됩니다 (그러나 브라우저 접두사도 사용하고 있음).

이 정보가 맞습니까? 이거 버그 야? 차이가 나는 이유가 있습니까? 어느 것을 사용해야합니까?

Answer 1

접두사 값은 MDN으로 "블록 맞춤 값"으로 표시됩니다. 즉, 블록 상자 자체가 그 안에있는 인라인 내용 외에도 정렬되어 있음을 의미합니다. 이것은 <center> 요소의 정확한 동작이며 접두사 값은 사실 인 입니다. 각 엔진에 대한 UA 스타일 시트를 보면 정확히 center { display: block; text-align: -vendor-center; }이라는 규칙 집합을 찾을 수 있습니다.

text-align: center이 이런 식으로 구현되지 않은 이유는 text-align이 블록 수준 상자가 아닌 인라인 수준 상자 (이름에 "text-"로 표시됨)에 영향을주기 위해 설계 되었기 때문입니다. 하지만 그건, 당신이 정말로 찾고있는 대답이 아닌 것 같습니다.

실제로 스 니펫에 정렬되는 상자는 블록 상자 인 인라인 블록 인 .content 요소입니다. 마지막 요소 이 가운데에 놓이는 이유는인데, 그 이유는 부모 인라인 블록이 수축 포장되어 자체가 그 조상의 text-align: center 선언에 중심을 맞추기 때문입니다.