如何在不使用display：table的情況下將div水平居中？

Question

是否可以將多行<div>水平居中，而其內容仍保持向左對齊（ text-align:left ），而無需指定display:table ，也不必知道<div>的像素寬度（它應該變成所需的寬度）？ 它必須在Firefox 3和Chrome中運行。

我有以下工作解決方案，其中另一個<div>包含一個<div> ，所以我只是在尋找不需要內部<div>的解決方案。

<style type="text/css">
div.showtitle {
  margin-left:auto;  
  margin-right:auto;
  display:table;
}
div.showtitle > div {
  background:#7777ff;
  color:ffffff;
  text-align:left;
  padding:.34em;
  font-size:140%;
}
</style>
<div class="showtitle"><div>Centered div<br>with left-aligned text</div></div>

僅供參考，為什么display:table和font-size:140%不能在同一<div>是，在Chrome中，其容器的font-size的行高在JavaScript中發生了變化，因此產生了不良影響。

Answer 1

<div style="margin:0 auto; width:300px">
  Text<br />
  text
</div>

Answer 2

您真正需要做的就是在div上設置寬度並設置自動邊距。 您不需要外部div ； 該元素將在其中包含的任何塊級元素（包括主體）中水平居中。

.showtitle 
{ 
    with: 350px; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: left; 
}

更新 ：

尚不清楚要使div的寬度是動態的並且是多行的，這是什么意思。 內容將在何時打包，或者您只想手動換行？ 如果您要進行內容包裝，那么在必須包裝時div會堅持100％嗎？ 如果您不希望寬度為100％，應將最大寬度設置為什么？

您提到要使內容左對齊，但是如果內容包含在自動調整大小以適合大小的居中塊中，則基本上是在要求居中的內聯元素。 如果希望將內容換行並左對齊，則必須指定寬度，也可以使用100％的寬度。 如果您希望文本行自動平衡然后調整容器的大小以適合我，我認為就CSS提供的功能而言，您很不走運。

Answer 3

<div class="showtitle">Centered div<br>with left-aligned text</div>

與

.showtitle {
    margin: 0 auto;
    width: ...;
}

應該可以在Firefox和Chrome中正常工作。

Answer 4

我可能讀錯了，但是您應該可以只應用margin: 0 auto; width:960px; margin: 0 auto; width:960px; 進入您的showtitle div，並保持金色。

Answer 5

<style>
    #outer {
        text-align: center;
    }
    #inner {
        display: -moz-inline-box; /* Firefox < 3 */
        display: inline-block; /* Standards */
        /* IE < 8, inline + hasLayout */
        *display: inline;
        *zoom: 1;
        text-align: left;
    }
</style>
<div id="outer"><div id="inner">Your centered content here</div></div>

Answer 6

看來，這是不可能做到的中心對准，而不display:table或內<div>或指定的寬度<div>