CSS：居中，但将内容向左对齐

81

我希望整个块都以其父对象为中心，但是我希望该块的内容保持对齐。

例子最好

在本页 ：

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

该错误消息应该像在控制台中一样全部对齐。

css  alignment  center 
— 保罗·塔里扬
source

Answers:

162

首先，创建一个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>
展开摘要

— 凯文
source
5
清晰有效。谢谢！
— Fuzzybear3965 '16
11
不起作用，因为只要一个单一文本的行不适合在一行它包装文本和结果在该块是满的宽度，但该文本小于全宽，所以即使该块被居中它不没关系，因为文本不是包含块的整个宽度。有关示例，请参阅stackoverflow.com/questions/8702802/…的
— user3338098'3
简单而美丽！谢谢
— Cesar Bielich
3
@ user3338098的确可以，您需要为文本设置最大宽度以阻止块扩展到不希望的大小。实际上，我将这种完全相同的逻辑应用于我的工作，并且能够实现图1b + 2b。
— 马克
20

重新提出另一个问题的有效答案：如何使宽度可变的浮动元素水平居中？

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

— 保罗·塔里扬
source
对于“ wrap”存在pre和“ content”也很好用code。
— Serge Stroobandt，2015年
无法正常运行，因为一旦This will be centered不适合一行，它就会包裹文本并导致块为全角，但文本小于全角，因此即使块居中也没关系，因为文本不是包含块的完整宽度。有关示例，请参考stackoverflow.com/questions/8702802/…的图2a 。
— user3338098's
尽量避免使用负值！它不能在所有浏览器中正常工作。
— Grasper
4

如果我对您的理解很好，则需要使用以使容器（或块）居中

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

并使其内容左对齐：

text-align: left;
— eKek0
source
那么，我应该在<pre>和<code>上放些什么？我已经尝试过变种但失败了。
— Paul Tarjan
您是否尝试过使用CSS类？
— eKek0
另外，您可以将容器div用于> pre>
— eKek0
2
我正在尝试一个容器div，并且使其工作的唯一方法是使用固定宽度（我不想要）。
— Paul Tarjan
2

通常，您应该在div上使用margin：0 auto，如其他答案中所述，但是您必须为div指定宽度。如果您不想指定宽度，则可以使用边距，例如margin：0 200px;。，这应该会使您的内容看起来好像居中，您也可以看到Leyu对我的问题的回答

— 沃尔德·伊莎
source
可悲的是，您的解决方案使用强制的水平滚动条会产生溢出。添加溢出：隐藏到父元素并不好，因为我的输出可能足够长，无法保证滚动条。抱歉：(
— Paul Tarjan
实际上，这并不是我所提到的解决方案，但是无论如何，我没有得到溢出的含义：隐藏强制滚动条，它应该隐藏内容而不是强制滚动条。
— Waleed Eissa
由于内容实际上向右移动了50％，因此帖子中的解决方案会导致水平滚动条。这需要一个溢出：隐藏以将其删除对我不起作用。
— Paul Tarjan
2

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

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
}

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

— 甘特
source
1 
<div>
    <div style="text-align: left; width: 400px; border: 1px solid black; margin: 0 auto;">
         <pre>
Hello
Testing
Beep
         </pre>
    </div>
</div>
— 琥珀色
source
另外，我不要宽度：400px。有没有可能？
— Paul Tarjan
问题在于，除非您对其进行限制，否则块级元素将扩展以填充最大可能的宽度。
— 琥珀色
所以，我想做什么是不可能的？
— Paul Tarjan
可能有人知道我不知道的秘密，但据我所知，是的。
— 琥珀色
我同意达夫的看法。也许，您可以看一下tinyMCE或其他富文本编辑器，该编辑器比标准HTML文本区域允许更多的自定义。不幸的是，您可能最终会花费大量时间来获得骇人听闻的结果。祝你好运！
— mkelley33
1

这是你想要的？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>
展开摘要

— 罗尼·罗斯顿
source
-1

这工作

<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>
— 用户名
source
3
您能解释一下您的代码及其优缺点吗？这样，其他人就可以从中学习，而不仅仅是复制和粘贴他们可能会或可能不会完全理解的内容。
— 罗伯特
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.