96

我希望整个块在其父块中居中，但我希望块的内容左对齐。

最好的例子

在本页面 ：

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+新+约克+洋基队%2c%0d%0a++++亚特兰大+勇士队+%5d%0d%0a%3a+%5b+2001-07-02%2c+ 2001-08-12%2c%0d%0a++++2001-08-14+%5d%0d%0a

错误消息应该像在控制台中一样排列。

4

9 回答 9

201

首先，创建一个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>

如果您希望确保长线不会将所有内容加宽太多，您还可以将max-width属性（具有您选择的值）应用于内部标签：

max-width: 250px;
于 2015-07-26T23:59:58.473 回答
22

重新发布另一个问题的工作答案：如何将可变宽度的浮动元素水平居中？

假设浮动并居中的元素是一个 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的一个很好的参考

于 2009-08-13T02:21:37.277 回答
5

如果我理解你，你需要使用来居中一个容器（或块）

margin-left: auto;
margin-right: auto;

并左对齐其内容：

text-align: left;
于 2009-08-13T01:37:05.450 回答
3

我发现在容器内居中和左对齐文本的最简单方法如下：

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
}

希望这就是您正在寻找的东西，因为我花了很多时间寻找这个非常基本的解决方案。

于 2018-02-06T11:07:05.207 回答
2

通常，您应该在其他答案中提到的 div 上使用 margin: 0 auto ，但是您必须为 div 指定宽度。如果您不想指定宽度，也可以（这取决于您要执行的操作）使用边距，例如 margin: 0 200px; ，这应该使您的内容看起来好像是居中的，您还可以看到Leyu对我的问题的回答

于 2009-08-13T01:56:39.903 回答
1 
<div>
    <div style="text-align: left; width: 400px; border: 1px solid black; margin: 0 auto;">
         <pre>
Hello
Testing
Beep
         </pre>
    </div>
</div>
于 2009-08-13T01:40:27.207 回答
1

这是你想要的？弹性盒...

.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>

于 2017-12-03T18:21:03.477 回答
1

对于我们这些仍在使用旧浏览器的人，这里有一些扩展的向后兼容性：

<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 。

于 2021-01-18T03:16:20.890 回答
-1

这行得通

<div style="display:inline-block;margin:10px auto;">
    <ul style="list-style-type:none;">
        <li style="text-align:left;"><span class="red">❶&lt;/span> YouTube AutoComplete Keyword Scraper software <em>root keyword text box</em>.</li>
        <li style="text-align:left;"><span class="red">❷&lt;/span> YouTube.com website <em>video search text box</em>.</li>
        <li style="text-align:left;"><span class="red">❸&lt;/span> YouTube AutoComplete Keyword Scraper software <em>scraped keywords listbox</em>.</li>
        <li style="text-align:left;"><span class="red">❹&lt;/span> YouTube AutoComplete Keyword Scraper software <em>right click context menu</em>.</li>
    </ul>
</div>
于 2017-03-19T03:04:12.003 回答