logo标签列表

CSS：如何将块居中，但是将内容左对齐

cssalignmentcenter
108

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

最好提供一些示例：

在这个页面上：

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

错误消息应该与控制台中的格式保持一致。

11个回答
223

首先，创建一个父级 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;
6
明确而有效。谢谢！ - fuzzybear3965
12
若一行文字超出了一行的长度，就会导致文本换行而块变为全宽度但文本不是全宽度，所以即使该块居中对齐也无济于事，因为文本并没有充满包含块的整个宽度。有关示例，请参见https://dev59.com/7moy5IYBdhLWcg3wN7UX的图2a。 - user3338098
简单而美丽！谢谢 - Cesar Bielich
4
它确实有效，针对您的情况，您需要设置文本的最大宽度，以防止该块扩展到不希望的大小。我刚刚在我的工作中应用了完全相同的逻辑，并成功实现了图1b + 2b。 - Mark
简单、优雅、完美。谢谢您，先生。 - Edvin Keskin
23

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

假设需要被浮动和居中的元素是具有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

同时，将“wrap”设置为“pre”，将“content”设置为“code”也能很好地工作。 - Serge Stroobandt
1
由于This will be centered一旦不能在一行上容纳，就会换行，导致块的宽度为全宽，但文本不是全宽，因此即使块居中，也无关紧要，因为文本不是包含块的全宽。有关示例，请参见https://dev59.com/7moy5IYBdhLWcg3wN7UX的图2a。 - user3338098
尽量避免使用负值！在所有浏览器中都无法正常工作。 - Grasper
5
我发现在一个容器内使文本居中和左对齐的最简单方法如下：
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
}

希望这是你在寻找的，因为我花了很长时间搜索才找到这个相当基本的解决方案。
硬编码宽度是简单明了的，但我认为对于这个问题的目的来说不是一个选项。 - Val Kornea
5
如果我理解正确，您需要使用居中容器（或块）。
margin-left: auto;
margin-right: auto;

左对齐其内容：

text-align: left;
那么，我应该在我的<pre>和<code>标签中放什么？我尝试了各种变化但都失败了。 - Paul Tarjan
你尝试使用CSS类了吗？ - eKek0
另外，您可以使用一个容器div来包含<pre>。 - eKek0
2
我正在尝试使用容器div，唯一使其正常工作的方法是使用固定宽度（而我不想这样做）。 - Paul Tarjan
2
通常情况下，您应该在div上使用margin: 0 auto，就像其他答案中提到的那样，但是您需要为div指定一个宽度。如果您不想指定宽度，您可以使用边距，例如margin: 0 200px;，这应该使您的内容看起来像是居中对齐的，您还可以参考Leyu的回答：我的问题。
很遗憾，您的解决方案会导致溢出并强制出现水平滚动条。在父元素中添加overflow: hidden并不好，因为我的输出可能足够长以需要滚动条。抱歉:( - Paul Tarjan
实际上这不是我的解决方案，而是我参考的。但无论如何，我不明白你所说的overflow: hidden强制出现滚动条，它应该隐藏内容而不是强制出现滚动条。 - Waleed Eissa
你发帖中的解决方案会导致水平滚动条出现，因为实际上内容向右移动了50%。这需要使用overflow:hidden来去除，但对我不起作用。 - Paul Tarjan
1
<div>
    <div style="text-align: left; width: 400px; border: 1px solid black; margin: 0 auto;">
         <pre>
Hello
Testing
Beep
         </pre>
    </div>
</div>
1
另外，我不想要宽度为400像素。没有那个可能吗？ - Paul Tarjan
问题在于块级元素会扩展到最大宽度，除非你对其进行限制。 - Amber
那么，我想做的是不可能的吗？ - Paul Tarjan
可能有人知道我不知道的秘密，但据我所知，是的。 - Amber
我同意Dav的看法。也许你可以看一下tinyMCE或其他富文本编辑器，它们允许比标准HTML文本框更多的定制。不幸的是，你可能最终会花费很多时间来实现一个不太完美的结果。祝你好运！ - mkelley33
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://dev59.com/RWjWa4cB1Zd3GeqPuM16#12567422。

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>

0
使用CSS的text-align和display属性，可以相应地看到更改。 边距也很有帮助。对于我来说，在SweetAlert中居中并向左对齐以下代码有效。对于您来说可能是不同的情况。
.format-pre pre {
    font-size: 18px;
    text-align: left;
    display: inline-block;
  }

在 ts 文件中

 showPasswordHints(){
  var message = 'Your password mist contain:<br>'+
  '1. At least 8 characters in length<br>'+
  '2. At least 3 Lowercase letters<br>'+
  '3. At least 1 Uppercase letter<br>'+
  '4. At least 1 Numbers<br>'+
  '5. At least 1 Special characters<br>'+
  '5. Maximum 16 characters in length';
Swal.fire({
  html:'<pre>' + message + '</pre>',
  customClass: {
    popup: 'format-pre'
  }
  ,
  showClass: {
    popup: 'animate__animated animate__fadeInDown'
  },
  hideClass: {
    popup: 'animate__animated animate__fadeOutUp'
  },
  icon: 'info',
  confirmButtonText: 'Got it',
  confirmButtonColor: '#3f51b5',
  });
 }
0

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  align-items: center;
}

.width {
  width: 12ch;
}

.title {
  text-align: center;
}

   
<span class="grid">
  <span class="width title">Title 1</span>
  <span class="width title">Title 2</span>
  <span class="width title">Title 3</span>
</span>
<span class="grid">
  <span class="width">13 characters</span>
  <span class="width">18 characters text</span>
  <span class="width">5 cha</span>
</span>
<span class="grid">
  <span class="width">3 c</span>
  <span class="width">9 charact</span>
  <span class="width">35 characters text and so on goes a</span>
</span>
<span class="grid">
  <span class="width">6 char</span>
  <span class="width">12 character</span>
  <span class="width">13 characters</span>
</span>
<span class="grid">
  <span class="width">7 chara</span>
  <span class="width">22 characters text and</span>
  <span class="width">15 characters g</span>
</span>

我使用每行的grid和每列的width，接近了上述可接受的结果。

这是原始文本：

span {
  border: 1px solid;
  }
 
<span class="grid">
  <span class="width title">Title 1</span>
  <span class="width title">Title 2</span>
  <span class="width title">Title 3</span>
</span>
<span class="grid">
  <span class="width">13 characters</span>
  <span class="width">18 characters text</span>
  <span class="width">5 cha</span>
</span>
<span class="grid">
  <span class="width">3 c</span>
  <span class="width">9 charact</span>
  <span class="width">35 characters text and so on goes a</span>
</span>
<span class="grid">
  <span class="width">6 char</span>
  <span class="width">12 character</span>
  <span class="width">13 characters</span>
</span>
<span class="grid">
  <span class="width">7 chara</span>
  <span class="width">22 characters text and</span>
  <span class="width">15 characters g</span>
</span>

我将它转换为一个完全居中的具有3列的网格：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  align-items: center;
}

span {
  border: 1px solid;
  }
 
<span class="grid">
  <span class="width title">Title 1</span>
  <span class="width title">Title 2</span>
  <span class="width title">Title 3</span>
</span>
<span class="grid">
  <span class="width">13 characters</span>
  <span class="width">18 characters text</span>
  <span class="width">5 cha</span>
</span>
<span class="grid">
  <span class="width">3 c</span>
  <span class="width">9 charact</span>
  <span class="width">35 characters text and so on goes a</span>
</span>
<span class="grid">
  <span class="width">6 char</span>
  <span class="width">12 character</span>
  <span class="width">13 characters</span>
</span>
<span class="grid">
  <span class="width">7 chara</span>
  <span class="width">22 characters text and</span>
  <span class="width">15 characters g</span>
</span>

最后，我为每个元素定义了一个特定的宽度。这导致了一个居中的块，其中文本左对齐，除了标题之外： 

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  align-items: center;
}

.width {
  width: 12ch;
}

.title {
  text-align: center;
}

span {
  border: 1px solid;
  }
 
<span class="grid">
  <span class="width title">Title 1</span>
  <span class="width title">Title 2</span>
  <span class="width title">Title 3</span>
</span>
<span class="grid">
  <span class="width">13 characters</span>
  <span class="width">18 characters text</span>
  <span class="width">5 cha</span>
</span>
<span class="grid">
  <span class="width">3 c</span>
  <span class="width">9 charact</span>
  <span class="width">35 characters text and so on goes a</span>
</span>
<span class="grid">
  <span class="width">6 char</span>
  <span class="width">12 character</span>
  <span class="width">13 characters</span>
</span>
<span class="grid">
  <span class="width">7 chara</span>
  <span class="width">22 characters text and</span>
  <span class="width">15 characters g</span>
</span>

针对每列的内容计数器，变化每列的width，可以更好地调整边缘情况。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接