CSS：中心块，但内容alignment左侧
我想要一个整体的块居中在其父，但我希望该块的内容左alignment。
例子服务最好
在本页 ：
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％＆types=蟒
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 +新+纽约洋基+ 2C％0D％0A％亚特兰大++++ +勇士+％5D 0D％0A％3A％+％5B + 2001年7月2日％2C + 2001年8月12日％2C％0D 0A％++++ 2001年8月14日+％5D％0D 0A％
错误信息应该像在控制台中一样排列。
首先，创build一个以text-align: center的父级div 。 接下来，创build一个使用display: inline-block的子div来适应其子元素的宽度，并使用text-align: left将其保存的内容按照需要向左alignment。
<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>
从另一个问题转发工作答案： 如何水平居中variables宽度的浮动元素？
假设被浮动的元素将被置于一个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
如果我理解你的话，你需要用一个容器（或块）
margin-left: auto; margin-right: auto;
并将其内容左alignment：
text-align: left;
<div> <div style="text-align: left; width: 400px; border: 1px solid black; margin: 0 auto;"> <pre> Hello Testing Beep </pre> </div> </div>
正常情况下，您应该使用div中的margin：0 auto，如其他答案中所述，但是您必须指定div的宽度。 如果你不想指定宽度，你可以（这取决于你想要做什么）使用边距，如margin：0 200px; ，这应该让你的内容看起来好像是以中心为中心的，你也可以在我的问题上看到乐雨的答案
这工作
<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>
