【发布时间】：2010-11-19 04:01:52
【问题描述】：
我希望整个块在其父块中居中，但我希望块的内容左对齐。
示例效果最好
在这个页面上：
ascii 艺术应该居中（如它所显示的那样），但它应该对齐并且看起来像“YAML”。
或者这个：
错误消息应该像在控制台中一样排列。
【问题讨论】：
【发布时间】：2010-11-19 04:01:52
【问题描述】：
首先，创建一个父div，以text-align: center 为其子内容居中。接下来，创建一个子 div，它使用 display: inline-block 来适应其子的宽度，并使用 text-align: left 使其包含的内容根据需要向左对齐。
<div style="text-align: center;">
<div style="display: inline-block; text-align: left;">
Centered<br />
Content<br />
That<br />
Is<br />
Left<br />
Aligned
</div>
</div>【讨论】：
-
清晰有效。谢谢！
-
不起作用，因为一旦 single 行文本不适合一行，它会换行文本并导致块全宽但文本小于全宽，因此即使块居中也没关系，因为文本不是包含块的全宽。示例请参阅stackoverflow.com/questions/8702802/… 的图 2a
-
简单漂亮！谢谢
-
@user3338098 它确实有效，在您的情况下，您需要为文本设置最大宽度以阻止块扩展为不需要的大小。我实际上只是将这个完全相同的逻辑应用到我的工作中，并且能够实现图 1b + 2b。
-
简单、优雅、完美。谢谢楼主
重新发布另一个问题的有效答案：How to horizontally center a floating element of a variable width?
假设浮动并居中的元素是一个 id="content" 的 div ...
<body>
<div id="wrap">
<div id="content">
This will be centered
</div>
</div>
</body>
并应用以下 CSS
#wrap {
float: left;
position: relative;
left: 50%;
}
#content {
float: left;
position: relative;
left: -50%;
}
这是关于http://dev.opera.com/articles/view/35-floats-and-clearing/#centeringfloats的一个很好的参考
【讨论】：
-
也适用于“包装”为
pre和“内容”code。 -
不起作用，因为一旦
This will be centered不适合一行，它就会包裹文本并导致块是全宽但文本小于全宽，所以即使块居中并不重要，因为文本不是包含块的全宽。示例请参考stackoverflow.com/questions/8702802/… 的图 2a。 -
尽量避免使用负值！它不会在所有浏览器中正常工作。
如果我理解你的话，你需要使用来居中一个容器（或块）
margin-left: auto;
margin-right: auto;
并将其内容左对齐：
text-align: left;
【讨论】：
-
那么，我在
和
上放什么？我已经尝试过变体但失败了。 -
你尝试过使用 css 类吗？
-
另外，您可以将容器 div 用于 >pre>
-
我正在尝试一个容器 div，使其工作的唯一方法是使用固定宽度（我不想要）。
我发现在容器内居中和左对齐文本的最简单方法如下：
HTML：
<div>
<p>Some interesting text.</p>
</div>
CSS：
P {
width: 50%; //or whatever looks best
margin: auto; //top and bottom margin can be added for aesthetic effect
}
希望这就是您要找的东西，因为我花了很多时间才找到这个非常基本的解决方案。
【讨论】：
通常您应该在其他答案中提到的 div 上使用 margin: 0 auto ，但您必须为 div 指定宽度。如果您不想指定宽度，也可以（这取决于您要执行的操作）使用边距，例如 margin: 0 200px; ，这应该会让你的内容看起来像是居中一样，你也可以看到乐宇对my question的回答
【讨论】：
-
遗憾的是，您的解决方案使用强制水平滚动条创建了溢出。添加溢出：隐藏到父元素并不好，因为我的输出可能足够长以保证滚动条。对不起:(
-
实际上这不是我提到的我的解决方案，但无论如何，我不明白你的意思溢出：隐藏强制滚动条，它应该隐藏内容而不是强制滚动条。
-
您帖子中的解决方案会导致水平滚动条，因为内容实际上向右移动了 50%。这需要一个溢出：隐藏来删除这对我不起作用。
<div>
<div style="text-align: left; width: 400px; border: 1px solid black; margin: 0 auto;">
<pre>
Hello
Testing
Beep
</pre>
</div>
</div>
【讨论】：
-
另外，我不想要宽度：400px。没有那个可能吗？
-
问题是块级元素会扩展以填充可能的最大宽度，除非您对其进行限制。
-
所以，我想做的事情是不可能的？
-
可能有人知道我不知道的秘密，但据我所知，是的。
-
我同意戴夫的观点。也许，您可能会看看 tinyMCE 或其他富文本编辑器，它允许比标准 HTML 文本区域进行更多的自定义。不幸的是，您最终可能会花费大量时间来获得骇人听闻的结果。祝你好运！
这就是你要找的吗？弹性盒...
.container{
display: flex;
flex-flow: row wrap;
justify-content: center;
align-content: center;
align-items: center;
}
.inside{
height:100px;
width:100px;
background:gray;
border:1px solid;
}<section class="container">
<section class="inside">
A
</section>
<section class="inside">
B
</section>
<section class="inside">
C
</section>
</section>【讨论】：
对于我们这些仍在使用旧版浏览器的人，这里有一些扩展的向后兼容性：
<div style="text-align: center;">
<div style="display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; text-align: left;">
Line 1: Testing<br>
Line 2: More testing<br>
Line 3: Even more testing<br>
</div>
</div>部分受到这篇文章的启发：https://stackoverflow.com/a/12567422/14999964。
【讨论】：
这行得通
<div style="display:inline-block;margin:10px auto;">
<ul style="list-style-type:none;">
<li style="text-align:left;"><span class="red">❶</span> YouTube AutoComplete Keyword Scraper software <em>root keyword text box</em>.</li>
<li style="text-align:left;"><span class="red">❷</span> YouTube.com website <em>video search text box</em>.</li>
<li style="text-align:left;"><span class="red">❸</span> YouTube AutoComplete Keyword Scraper software <em>scraped keywords listbox</em>.</li>
<li style="text-align:left;"><span class="red">❹</span> YouTube AutoComplete Keyword Scraper software <em>right click context menu</em>.</li>
</ul>
</div>
【讨论】：
-
您能解释一下您的代码及其优缺点吗？这样其他人就可以从中学习，而不仅仅是复制和粘贴他们可能完全理解或不完全理解的东西。