Css 如何在不显示表格的情况下水平居中div？

是否可以水平居中多行

，同时其内容保持左对齐（

文本对齐：左

），而无需指定

显示：表格

，也无需知道

的像素宽度（应根据需要变宽）？它必须在Firefox3和Chrome中工作

我有下面的工作解决方案，其中包含一个

在另一个

中，因此我只寻找一个不需要内部

的解决方案

节目名称{
左边距：自动；
右边距：自动；
显示：表格；
}
div.showttitle>div{
背景#7777ff；
颜色：ffffff；
文本对齐：左对齐；
填充：.34em；
字体大小：140%；
}
带左对齐文本的居中div

仅供参考，

display:table

和

font size:140%

不能组合在同一个

中的原因是，在Chrome中，它对容器的

font size

的行高有不良影响，在JavaScript中会发生更改。

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

文本

文本

---

在Firefox和Chrome中应该可以正常工作。

我可能读错了，但你应该可以只应用

margin:0 auto；宽度：960px

到您的showtitle div并成为金色。

您真正需要的是在

div上设置一个宽度并设置自动边距。您不需要外部
div
；该元素将水平居中于它所包含的任何块级元素中，包括主体

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

更新：

不清楚您希望div的宽度是动态的，但又是多行的，这是什么意思。内容将在什么时候换行，或者您只想手动换行？如果你在做内容包装，一旦必须包装，div会坚持100%吗？如果不希望宽度为100%，应将其最大宽度设置为什么

您提到您希望内容左对齐，但是如果它包含在一个自动调整大小以适应的居中块中，那么您基本上要求的是一个居中的内联元素。如果要将内容换行为多行并左对齐，则必须指定宽度，或者使用100%宽度。如果您希望文本行自动平衡，然后调整容器大小以适应需要，我相信就CSS提供的功能而言，您运气不佳。

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

#外{
文本对齐：居中；
}
#内在的{
显示：-moz内联框；/*Firefox<3*/
显示：内联块；/*标准*/
/*IE<8，内联+布局*/
*显示：内联；
*缩放：1；
文本对齐：左对齐；
}
你的中心内容在这里
如果没有
显示：表格或内部
或指定
的宽度，或者指定
的宽度，似乎不可能进行中心对齐。对不起，我忘了说
div
的像素宽度事先未知：它应该根据需要变宽。对不起，我忘了说
div
的像素宽度事先不知道：它应该根据需要变宽。在这种情况下，您可以尝试
左边距：50%
但我不确定这是否适合您的应用程序。对不起，我忘了说
div
的像素宽度事先不知道：它应该根据需要变宽。对不起，我忘了说
div
的像素宽度事先是未知的：它应该根据需要变宽。然后你不能将它居中，因为没有指定的宽度，它们将100%宽-占用整个可用空间，因此“居中”。如果需要，可以将左/右边距/填充指定为一定的厚度。而不是
auto
put specific px或em。这并不能回答我的问题，因为（请参见问题中的）我只是在寻找一个不需要内部解决方案的解决方案。@pts，所以你接受了“无解决方案”？您的问题似乎将嵌套的
问题解释为
显示：表的副作用问题，而不是一般的嵌套
问题（您显然已经尝试并愿意接受）。因此，您可以访问标记，并尝试嵌套
s。我的解决方案有效吗，还是以某种方式失败了？编辑：确认，很抱歉格式化。SO在评论中的伪降价似乎有一些问题。您的解决方案在我的Firefox 3.6中起作用（即将
div
），但您的解决方案没有回答我的问题，因为在我的问题中，我要求的是一个没有嵌套
div
s的解决方案。@pts，我理解这一点，但考虑到您已经尝试了嵌套
的解决方案，这不只是一个学术上的限制而不是一个实际的限制吗？这个解决方案是有效的，并且没有明显的理由说明为什么要添加这个限制。在某些情况下，例如我的情况下，仅仅为了更改样式而更改DOM是不方便或麻烦的。如果你通常不会遇到这样的情况，可以将其视为学术限制+不管怎样，我还是喜欢它。
.showtitle {
    margin: 0 auto;
    width: ...;
}

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

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