CSS：居中块，但内容向左对齐
Posted
技术标签:
【中文标题】CSS：居中块，但内容向左对齐【英文标题】：CSS: Center block, but align contents to the left 【发布时间】：2010-11-19 04:01:52 【问题描述】：我希望整个块在其父块中居中，但我希望块的内容左对齐。
示例效果最好
在这个页面上：
http://yaml-online-parser.appspot.com/?yaml=%23+ASCII+Art%0d%0a---+%7c%0d%0a++%5c%2f%2f%7c%7c%5c%2f%7c%7c%0d%0a++%2f%2f+%7c%7c++%7c%7c__%0d%0a&type=python
ascii 艺术应该居中（如它所显示的那样），但它应该对齐并且看起来像“YAML”。
或者这个：
http://yaml-online-parser.appspot.com/?yaml=%3f+-+Detroit+Tigers%0d%0a++-+Chicago+cubs%0d%0a%3a%0d%0a++-+2001-07-23%0d%0a%0d%0a%3f+%5b+New+York+Yankees%2c%0d%0a++++Atlanta+Braves+%5d%0d%0a%3a+%5b+2001-07-02%2c+2001-08-12%2c%0d%0a++++2001-08-14+%5d%0d%0a
错误消息应该像在控制台中一样排列。
【问题讨论】：
【参考方案1】：首先，创建一个父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 行文本不适合一行，它会换行文本并导致块全宽但文本小于全宽，因此即使块居中也没关系，因为文本不是包含块的全宽。示例请参阅***.com/questions/8702802/… 的图 2a 简单漂亮！谢谢 @user3338098 它确实有效，在您的情况下，您需要为文本设置最大宽度以阻止块扩展为不需要的大小。我实际上只是将这个完全相同的逻辑应用到我的工作中，并且能够实现图 1b + 2b。 简单、优雅、完美。谢谢楼主【参考方案2】：重新发布另一个问题的有效答案：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 不适合一行，它就会包裹文本并导致块是全宽但文本小于全宽，所以即使块居中并不重要，因为文本不是包含块的全宽。示例请参考***.com/questions/8702802/… 的图 2a。
尽量避免使用负值！它不会在所有浏览器中正常工作。【参考方案3】：
如果我理解你的话，你需要使用来居中一个容器（或块）
margin-left: auto;
margin-right: auto;
并将其内容左对齐：
text-align: left;
【讨论】：
那么，我在 和 上放什么？我已经尝试过变体但失败了。
你尝试过使用 css 类吗？
另外，您可以将容器 div 用于 >pre>
我正在尝试一个容器 div，使其工作的唯一方法是使用固定宽度（我不想要）。【参考方案4】：
我发现在容器内居中和左对齐文本的最简单方法如下：
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
希望这就是您要找的东西，因为我花了很多时间才找到这个非常基本的解决方案。
【讨论】：
【参考方案5】：通常您应该在其他答案中提到的 div 上使用 margin: 0 auto ，但您必须为 div 指定宽度。如果您不想指定宽度，也可以（这取决于您要执行的操作）使用边距，例如 margin: 0 200px; ，这应该会让你的内容看起来像是居中一样，你也可以看到乐宇对my question的回答
【讨论】：
遗憾的是，您的解决方案使用强制水平滚动条创建了溢出。添加溢出：隐藏到父元素并不好，因为我的输出可能足够长以保证滚动条。对不起:( 实际上这不是我提到的我的解决方案，但无论如何，我不明白你的意思溢出：隐藏强制滚动条，它应该隐藏内容而不是强制滚动条。 您帖子中的解决方案会导致水平滚动条，因为内容实际上向右移动了 50%。这需要一个溢出：隐藏来删除这对我不起作用。【参考方案6】：<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 文本区域进行更多的自定义。不幸的是，您最终可能会花费大量时间来获得骇人听闻的结果。祝你好运！【参考方案7】：这就是你要找的吗？弹性盒...
.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>【讨论】：
【参考方案8】：对于我们这些仍在使用旧版浏览器的人，这里有一些扩展的向后兼容性：
<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://***.com/a/12567422/14999964。
【讨论】：
【参考方案9】：这行得通
<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>
【讨论】：
您能解释一下您的代码及其优缺点吗？这样其他人就可以从中学习，而不仅仅是复制和粘贴他们可能完全理解或不完全理解的东西。以上是关于CSS：居中块，但内容向左对齐的主要内容，如果未能解决你的问题，请参考以下文章