CSS：居中块，但将内容向左对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1269589/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: Center block, but align contents to the left
提问by Paul Tarjan
I want a whole block to be centered in its parent, but I want the contents of the block to be left aligned.
我希望整个块在其父项中居中，但我希望块的内容左对齐。
Examples serve best
例子服务最好
On this page :
在本页 ：
the ascii art should be centered (as it appears) but it should line up and look like "YAML".
ascii 艺术应该居中（正如它出现的那样），但它应该排列并看起来像“YAML”。
Or this :
或这个 ：
the error message should all line up as it does in a console.
错误消息应该像在控制台中一样排列。
采纳答案by Paul Tarjan
Reposting the working answer from the other question: How to horizontally center a floating element of a variable width?
重新发布另一个问题的工作答案：如何水平居中可变宽度的浮动元素？
Assuming the element which is floated and will be centered is a div with an id="content" ...
假设浮动并居中的元素是一个 id="content" 的 div ...
<body>
<div id="wrap">
<div id="content">
This will be centered
</div>
</div>
</body>
And apply the following CSS
并应用以下 CSS
#wrap {
float: left;
position: relative;
left: 50%;
}
#content {
float: left;
position: relative;
left: -50%;
}
Here is a good reference regarding that http://dev.opera.com/articles/view/35-floats-and-clearing/#centeringfloats
这是关于http://dev.opera.com/articles/view/35-floats-and-clearing/#centeringfloats 的一个很好的参考
回答by Keavon
First, create a parent divthat centers its child content with text-align: center. Next, create a child divthat uses display: inline-blockto adapt to the width of its children and text-align: leftto make the content it holds align to the left as desired.
首先，创建一个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>回答by eKek0
If I understand you well, you need to use to center a container (or block)
如果我理解你，你需要使用来居中一个容器（或块）
margin-left: auto;
margin-right: auto;
and to left align it's contents:
并左对齐它的内容：
text-align: left;
回答by Waleed Eissa
Normally you should use margin: 0 auto on the div as mentioned in the other answers, but you'll have to specify a width for the div. If you don't want to specify a width you could either (this is depending on what you're trying to do) use margins, something like margin: 0 200px; , this should make your content seems as if it's centered, you could also see the answer of Leyu to my question
通常，您应该在 div 上使用 margin: 0 auto ，如其他答案中所述，但您必须为 div 指定宽度。如果您不想指定宽度，您也可以（这取决于您要做什么）使用边距，例如 margin: 0 200px; ，这应该让你的内容看起来好像是居中的，你也可以看到乐宇对我的问题的回答
回答by Amber
<div>
<div style="text-align: left; width: 400px; border: 1px solid black; margin: 0 auto;">
<pre>
Hello
Testing
Beep
</pre>
</div>
</div>
回答by Ronnie Royston
Is this what you are looking for? Flexbox...
这是你想要的？弹性盒...
.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>回答by L.Gaunt
I've found the easiest way to centre and left-align text inside a container is the following:
我发现在容器内居中和左对齐文本的最简单方法如下：
HTML:
HTML：
<div>
<p>Some interesting text.</p>
</div>
CSS:
CSS：
P {
width: 50%; //or whatever looks best
margin: auto; //top and bottom margin can be added for aesthetic effect
}
Hope this is what you were looking for as it took me quite a bit of searching just to figure out this pretty basic solution.
希望这就是您要找的东西，因为我花了很多时间才找到这个非常基本的解决方案。
回答by user7212232
THIS works
这有效
<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>
