너비가 미리 알려지지 않았을 때 콘텐츠 블록의 중심을 지정하십시오.

Question

많은 시도와 검색 끝에 CSS2로 만족스런 방법을 찾지 못했습니다.

간단한 방법은 아래 샘플과 같이 편리한 <table>에 넣는 것입니다. 테이블 레이아웃을 피하고 기발한 트릭을 피하는 방법을 알고 계십니까?

---

내가 알고 싶은 것은 고정 폭없이 그것을 또한 블록 인 방법입니다

table { 
 
    margin: 0 auto; 
 
}

<table> 
 
    <tr> 
 
    <td>test<br/>test</td> 
 
    </tr> 
 
</table>

.

Answer 1

@ 제이슨, 네, <center> 작품. 좋은 시간. 그래도 다음을 제안합니다 :

body { 
 
    text-align: center; 
 
} 
 

 
.my-centered-content { 
 
    margin: 0 auto; /* Centering */ 
 
    display: inline; 
 
}

<div class="my-centered-content"> 
 
    <p>test</p> 
 
    <p>test</p> 
 
</div>

편집 @Santi는, 블록 수준 요소는 부모 컨테이너의 너비를 채울 것, 효과적으로 width:100%과 수 있도록 왼쪽에 텍스트가 흐르게되어 쓸모없는 마크 업과 집중되지 않은 요소가 남게됩니다. display: inline-block;을 시도해보십시오. Firefox는 불평 할 수 있지만 it's right. 또한 .my-centered-content DIV의 CSS에 border: solid red 1px;을 추가하여 이러한 작업을 시도하면서 어떤 일이 일어나는지 확인해보십시오.

Answer 2

이것은 lamest 해답이 될 것입니다,하지만 작동합니다

Use the deprecated <center> tag합니다.

: P

나는 그것이 절름발이 일 것이라고 말했습니다. 하지만, 내가 말한 것처럼, 그것은 효과가있다!

* 전율 *

Answer 3

< > 대신 <div>을 사용한 경우 예제가 올바르게 작동한다고 생각합니다. 유일한 차이점은 < 표 >의 텍스트도 가운데 맞춤이라는 것입니다. 원한다면 text-align : center를 추가하면됩니다. 규칙.

또 다른 사실은 <div>은 기본적으로 사용 가능한 모든 가로 공간을 채 웁니다. 그것이 시작하고 끝나는 곳이 확실치 않으면 경계를하십시오.

Answer 4

다음 내용이 적합합니다. 위치 및 자동

<div style="border: 1px solid black; 
      width: 300px; 
      height: 300px;"> 
      <div style="width: 150px; 
         height: 150px; 
         background-color: blue; 
         position: relative; 
         left: auto; 
         right: auto; 
         margin-right: auto; 
         margin-left: auto;"> 
      </div> 
</div> 

참고의 사용을 참고 : IE에서 작동 있는지 확실하지 않습니다.

Answer 5

#wrapper { 
 
    width: 100%; 
 
    border: 1px solid #333; 
 
} 
 
#content { 
 
    width: 200px; 
 
    background: #0f0; 
 
}

<div id="wrapper" align="center"> 
 
    <div id="content" align="left"> Content Here </div> 
 
</div>

FF3에서

Answer 6

수행 할 수 있습니다

이 가장 의미 론적 의미가 어떤 요소 사용의 장점을 (해당되는 경우, 더 나은 뭔가 사업부 교체)가

<div style="display: table; margin: 0px auto 0 auto;">test<br>test</div> 

, 하지만 그것은 IE (grr ...)에서 실패한 단점

너비를 설정하지 않고, 가장 좋은 방법은 javasc를 사용하는 것입니다. 왼쪽 가장자리를 정확하게 위치시키는 ript. 그래도 클래스를 '기발한 트릭'으로 분류 할 지 확신하지 못합니다.

정말 당신이하고 싶은 일에 달려 있습니다. 간단한 테스트 케이스가 주어지면 text-align : center가있는 div는 똑같은 효과를 나타냅니다.