當你事先不知道它的寬度時，將一個內容塊居中

經過大量的嘗試和搜索之後，我從來沒有找到一種令人滿意的方式來使用CSS2。當你事先不知道它的寬度時，將一個內容塊居中

完成它的一個簡單方法是將其包裝到方便的<table>中，如下面的示例所示。你知道怎麼做，避免表格佈局，也避免古怪的技巧？

table { 
 
    margin: 0 auto; 
 
}

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

我想知道的是如何做到這一點沒有一個固定的寬度，也作爲一個塊。

來源

2008-09-05 Santiago Corredoira

我最喜歡的是在問題中提出的表格方法！我可能是錯的，但喬的解決方案不適用於嵌套在其他div的div內。 – Kyle 2010-10-12 04:42:27

@Jason，沒錯，<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。另外，嘗試將border: solid red 1px;添加到.my-centered-content DIV的CSS中，以便在您嘗試這些事情時查看發生了什麼。

來源

2008-09-05 17:48:53

顯示：inline-block在Firefox中正常工作，但在IE中使寬度爲100％ – 2008-09-08 18:27:11

這將是最爛的答案，但它的工作原理：

Use the deprecated <center> tag。

：P

我告訴過你，這將是跛腳。但是，就像我說的那樣，它起作用了！

*不寒而慄*

來源

2008-09-05 17:34:19

我認爲你的例子可以工作，如果你使用<div>而不是<表>。唯一的區別是<表>中的文本也居中。如果你也想這樣，只需添加text-align：center;規則。

要記住的另一件事是<div>將默認填充所有可用的水平空間。如果您不確定它開始和結束的位置，請在其上放置邊框。

來源

2008-09-05 17:49:09 Neall

以下工作得很好。注意位置，並利用汽車

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

來源

2008-09-05 17:56:44 codeLes

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

來源

2008-09-05 19:19:51 ironkeith

在FF3，您可以：

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

這有利用一切要素，使大部分的語義意義的優勢（更好的東西代替的div，如果合適的話），但缺點，它在IE瀏覽器（grr ...）

除此之外，沒有設置寬度，最好的選擇是使用javasc撕裂以精確定位左側邊緣。不過，我不確定你是否會將其視爲「古怪的技巧」。

這當然取決於你想要做什麼。考慮到你的簡單測試用例，帶有text-align：center的div將具有完全相同的效果。

來源

2008-09-08 18:42:29

當你事先不知道它的寬度時，將一個內容塊居中

回答

相關問題