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;应用到你的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>的宽度，无法进行中心对齐。

如何在没有显示的情况下水平居中div：table？

6 个答案: