css - 如何在不显示的情况下水平居中div :table?

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>