Căn giữa một khối nội dung khi bạn không biết chiều rộng của nó trước

Question

Sau nhiều lần thử và tìm kiếm, tôi chưa bao giờ tìm thấy cách thỏa đáng để làm điều đó với CSS2.

Cách đơn giản để hoàn thành nó là quấn nó vào một số <table> tiện dụng như được trình bày trong ví dụ bên dưới. Bạn có biết làm thế nào để làm điều đó tránh bố trí bảng và cũng tránh thủ thuật kỳ quặc?

table { 
 
    margin: 0 auto; 
 
}

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

---

Những gì tôi muốn biết là làm thế nào để làm điều đó mà không có một chiều rộng cố định và cũng có thể trở thành một khối.

Answer 1

@Jason, yep, <center> hoạt động. Thời gian tốt. Tôi sẽ đề nghị sau đây, mặc dù:

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>

EDIT @Santi, một yếu tố khối cấp sẽ choán hết chiều rộng của vùng chứa mẹ, vì vậy nó sẽ có hiệu quả được width:100% và văn bản sẽ chảy ở bên trái, để lại cho bạn đánh dấu vô dụng và một phần tử không được chú ý. Bạn có thể muốn thử display: inline-block;. Firefox có thể khiếu nại, nhưng it's right. Ngoài ra, hãy thử thêm border: solid red 1px; vào CSS của số .my-centered-content DIV để xem điều gì đang xảy ra khi bạn thử những điều này.

Answer 2

Đây sẽ là câu trả lời hay nhất, nhưng nó hoạt động:

Use the deprecated <center> tag.

: P

Tôi đã nói với bạn rằng điều đó sẽ không đáng kể. Nhưng, như tôi đã nói, nó hoạt động!

* rùng mình *

Answer 3

Tôi nghĩ rằng ví dụ của bạn sẽ hoạt động tốt nếu bạn đã sử dụng <div> thay vì < bảng >. Điểm khác biệt duy nhất là văn bản trong bảng < > cũng được căn giữa. Nếu bạn muốn điều đó nữa, chỉ cần thêm text-align: center; qui định.

Một điều khác cần lưu ý là <div> sẽ mặc định lấp đầy tất cả khoảng trống ngang có sẵn. Đặt một đường viền trên nó nếu bạn không chắc chắn nó bắt đầu và kết thúc ở đâu.

Answer 4

Các công trình sau đây đủ tốt. lưu ý các vị trí , và việc sử dụng các auto

<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> 

Chú ý: không chắc chắn nếu nó hoạt động trong 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>

Answer 6

Trong FF3, bạn có thể:

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

này có lợi thế của việc sử dụng bất cứ yếu tố có ý nghĩa ngữ nghĩa nhất (thay thế div với một cái gì đó tốt hơn, nếu thích hợp), nhưng bất lợi là nó không thành công trong IE (grr ...)

Khác với điều đó, không đặt chiều rộng, tốt nhất là sử dụng javasc ript để định vị chính xác cạnh trái. Tuy nhiên, tôi không chắc liệu bạn có thể coi đó là một 'mẹo kỳ quặc' hay không.

Nó thực sự phụ thuộc vào những gì bạn muốn làm, tất nhiên. Với trường hợp thử nghiệm đơn giản của bạn, một div có căn chỉnh văn bản: trung tâm sẽ có cùng tác dụng chính xác.