CSS로 고정 너비 요소 중심 맞추기

Question

CSS를 사용하여 고정 너비 요소를 수평으로 가운데에 배치하는 두 가지 일반적인 방법을 발견했습니다. 누군가가 하나의 기술을 사용할 때보 다 더 깊이 이해할 수 있기를 바랍니다.

하나의 기술은 text-align:center을 사용하고 다른 하나는 margin:auto을 사용합니다.

아래에서는 동일한 것을 달성하는 데 두 가지 방법을 모두 사용하는 방법을 설명했습니다. 코드를 살펴보면 margin:auto 방법이 더 좋은 방법이라고 말할 수는 있지만, 이런 종류의 작업을 수행하는 다른 더 좋은 방법이 있는지 또는 text-align 방법이있는 경우가 궁금합니다. 바람직하다.

여기 예제 코드를 볼 수 아래 http://dabblet.com/gist/1634534 또는 :

<div class="wrap1"> 
    <h1>Hey now</h1> 
</div> 

<div class="wrap2"> 
    <h1>Hey now</h1> 
</div> 

---

h1 { 
    background-color: #CCC; 
    width: 200px; 
} 

div.wrap1 { 
    text-align: center; 
    background-color: blue; 
    padding: 5px; 
} 
div.wrap1 h1 { 
    display: inline-block; 
    text-align: left; 
} 

div.wrap2 { 
    background-color: red; 
    padding: 5px; 
} 

div.wrap2 h1 { 
    margin: 0 auto; 
} 

Answer 1

를 내가 대답은 구현에 생각합니다.

Wrap1은 display: inline-block을 사용합니다. 요소 주위에 인라인 블록 요소를 만들면 해당 요소와 "인라인 (inline)"이됩니다. 즉, 동일한 평면에 시각적으로 가로로 표시됩니다.

Wrap2는 margin: 0 auto이고 디스플레이는 default: block입니다. 이것은 당연히 요소를 블럭 요소로 만들고, 따라서 그것은 온라인 상에 시각적으로 표시됩니다.

결론은 인라인 개체를 중앙에 배치하려는 경우 display: inline-block을 사용하는 것입니다. 단일 블록 요소를 중심으로 배치하는 경우 margin: 0 auto 솔루션이 작동합니다.

P. display: inline-block 솔루션은 가변 폭 요소에도 적용됩니다.

편집 : 예제에는 jsfiddle이 있지만 가변 너비 요소와 다중 인라인 요소를 표시하도록 편집되었습니다.

Answer 2

텍스트 정렬의 CSS 속성은 페이지에 이동 텍스트가있을 때 사용됩니다.

화면에 div를 가운데 맞춤하려면 항상 margin : auto를 사용해야합니다. 의미 론적으로 말하면 실제로 마진 : 자동차는 센터 블록과 관련하여 모든 사람이 사용하는 것입니다.

그래서 h1을 배치하려면 text-align을 사용하십시오 (아래 링크 참조). 헤더 블록에서 text-align을 사용합니다.

편집 : 일반적인 관행이 페이지를 참조하십시오 : http://www.w3schools.com/cssref/pr_text_text-align.asp

Answer 3

http://reference.sitepoint.com/css/text-align:

텍스트 정렬 인라인 박스의 폭의 합이 라인 박스의 폭 미만이면 블록의 인라인 함유량이 정렬되는 방식을 지정한다.

http://reference.sitepoint.com/css/margins :

여백 속성은 저자가 나는 그게 내가 실제로 최근에 실행 한 경우 이후 여러 인라인 블록 요소를 중심으로 당신의 언급처럼 상자의 여백