如何使左对齐的文本在换行时仍能居中？

Question

如何使左对齐的文本在换行时仍能居中？

htmlcssalignmenttext-alignment

35

我需要将一个左对齐文本块居中在一个div中，但是我需要文本块的可视宽度居中而不是块本身。

在许多情况下，这可能是相同的，但想象一种情况，其中div相当窄（考虑移动设备宽度），而文本太长无法放在一行内，因此需要溢出。

在下面的示例中，我将文本块显示为浅蓝色以进行说明，但实际上它们将与父div相同颜色（白色）。任何使用的文本中也没有换行符。

enter image description here

在1a中，文本只有一行，且小于文本块的最大宽度，因此我可以将文本块设置为文本的宽度，没有问题。

然而，在2a中，文本长度超过了最大宽度，因此换行到下一行。这样做的效果是可见的文本块不再居中。

如何仅使用HTML和CSS将这两种情况都显示为1b和2b？

编辑1：似乎每个人都在告诉我如何实现1a和2a中的情况，但我已经有了。我想要实现1b和2b中的情况。

编辑2：我正在使用的代码基本上与David在他的链接中给出的代码相同（http://jsfiddle.net/davidThomas/28aef/）。文本区域的颜色只是为了说明这一点。如果你将其更改为白色（http://jsfiddle.net/28aef/2/），你可以看到文本块不再居中（即左右边距不相等）。

- JohnGB

@JohnGB 这个问题有没有相关的 JavaScript 代码？ - user3338098

@user3338098：很遗憾，目前似乎没有不需要计算换行位置并基本上自己计算布局的解决方案。 - JohnGB

这个问题在2017年为什么还没有得到正确的回答呢... - ricka

1

@johnwait 但是你能让它与具有“width：auto”的容器一起工作吗？ - user3338098

1

这里有一个演示问题的fiddle，我们仍然没有解决方案：https://jsfiddle.net/brettdonald/fm0zxpuv/1/ - Brett Donald

显示剩余8条评论

6个回答

1

我猜原作者早已解决了这个问题，但我也有同样的问题并在谷歌上搜索答案。以下是我找到的结果。

免责声明：我不是任何方面的专家，其他人可能有更优雅的处理此情况的方式，但它适用于我的应用程序，也可能适用于其他应用程序，因此我想发布它。

<div style = "text-align: center; margin-left: 10%; margin-right: 10%">
    <div style = "display: inline-block; text-align: left;">
        Desired text goes here.
    </div>
</div>

请注意，在上面的代码中，第一个 div 可能不是必需的，边距可以很少更改地移到第二个 div 中。根据需要调整百分比或指定像素宽度，你就准备好了。希望这能在某个时候为某人节省时间，并且不会创建任何新问题。祝大家好运。

- Lokipiece

你能展示一下这个实例的运行情况吗？因为它似乎并没有回答原始问题。 - JohnGB

0

在我评论问题时，我发现了同一行上另外两个不太理想的解决方法，所以我想把它们放在一起，并进行视觉比较，以帮助他人。唯一的优点是它们不需要JS并且适用于换行文本（即无需手动添加新行）。

text-align：text-align: justify; — 可能会在短文本中留下单词之间的丑陋空格，尤其是长单词。
hyphens：-webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; — 无法填充所有伪右边距。
word-break：word-break: break-all; — 居中但是一旦接触到边缘就会断开单词。
前面选项的组合。

对于会溢出容器的单词，我们需要添加overflow-wrap: break-word;。我将其注释掉的原因是为了展示每个示例如何处理长“音节”的差异。请注意，它不会添加连字符（类似于word-break: break-all;）。

这些解决方法的一部分是从justmarkup.com网站中适应过来的。
如果手动添加<br>是一个选项，那么John's answer可能更合适。
如果JS也是一个选项，请转到我的评论并跟随链接，或者不要。
我还提到了CSS媒体查询，因为它们被提议作为与JS一起解决问题的解决方案。然而，我研究了一下，我不认为它们在这种情况下会起作用，因为它们需要有一个可预测大小的内容，以便能够事先计算容器的大小。它只是检查视口（可见区域）的大小，以便当它落入（或超出）预设范围时，容器将设置为预定义大小之一。但在我们的情况下，我们无法预测任何随机文本的最佳容器大小。
容器查询也无法解决问题，因为它们不允许我们检查文本的宽度，只允许我们检查包含它的框的宽度。如果我们设置display: contents以防止box被创建，那么宽度将为0px。
这个问题在最近的Chrome博客文章中提到了关于平衡文本。我引用它是因为他们意识到了这一点，我相信同样的技术可以应用于修复它：

. . .

均衡的文本换行技术讽刺地给包含元素带来了不平衡。

浏览器使用的技术简要说明

浏览器有效地对最小宽度进行二进制搜索，以避免产生额外的行，停止在一个CSS像素（而不是显示像素）上。为了进一步减少二进制搜索中的步骤，浏览器从平均行宽的80％开始。

div {
  width: 10em;
  margin: 0 auto 1em auto;
  border: 1px solid #000;
  padding: 1em;
  background-color: lightgreen;
  /* overwritten in case 0 */
  
}

.text0 {
  text-align: justify;
}

.text1 {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

.text2 {
  word-break: break-all;
}

h1 {
  text-align: center;
}

p {
  background-color: aqua;
  /*overflow-wrap: break-word;*/
}

<!DOCTYPE html>
<html lang="en">
<!-- !DOCTYPE and html tags are required for the hyphens to work in this example -->

<body>
  <h1>Justify</h1>
  <div class="text0">
    <p>This is a bit of text displaying on more than two lines. Try to bbbbbbbbbbbbbbbbbbbbbbbreak this word.</p>
  </div>

  <h1>Hyphens</h1>
  <div class="text1">
    <p>This is a bit of text displaying on more than two lines. Try to bbbbbbbbbbbbbbbbbbbbbbbreak this word.</p>
  </div>

  <h1>break-all</h1>
  <div class="text2">
    <p>This is a bit of text displaying on more than two lines. Try to bbbbbbbbbbbbbbbbbbbbbbbreak this word.</p>
  </div>
  
  <h1>Justify and break-all</h1>
  <div class="text0 text2">
    <p>This is a bit of text displaying on more than two lines. Try to bbbbbbbbbbbbbbbbbbbbbbbreak this word.</p>
  </div>
  
  <h1>Justify and hyphens</h1>
  <div class="text0 text1">
    <p>This is a bit of text displaying on more than two lines. Try to bbbbbbbbbbbbbbbbbbbbbbbreak this word.</p>
  </div>
</body>

</html>

- DystD

0

我知道这个问题很老了，但还没有得到答案。至少可以使用calc() vh和vw（视口单位）以及一些数学知识来解决它。关键似乎是手动将左侧和顶部设置为中心位置。我使用视口单位来获得更高的精度和不断变化的效果。

    .clr { clear:both; }
    .bg666 { background:#666;}  
    .bgf4 { background: #f4f4f4; }
    .hv60 { height: 60vh; }
    .hv50 { height: 50vh; }
    .wv60 { width: 60vw; }
    .wv50 { width: 50vw; }
    .tlset { position:relative; left: 30px; top: 30px; }
    .true_cntr_inner { position:relative; left: calc(60vw - 50vw - 5vw);  top: calc(60vh - 50vh - 5vh); } /* left = (60% - 50% of inner block / 2);*/

    <div class = 'clr wv60 hv60 bg666 tlset'>
        <div class = 'clr wv50 hv50 true_cntr_inner bgf4'>
            this is some text that spans acrossed 50% of the viewport. 
            I state the obvious because I believe people can see the obvious and I 
            was wrong a lot. Now it has become somewhat of a habit like bad spelling 
            so forgive me. 
        </div>
    </div>

我正在寻找一个解决方案，能够在窗口调整大小时将包含文本的DIV居中并调整大小。我偶然发现了这篇文章，并在意识到使用普通的CENTER方法存在问题后找到了一个解决方法。希望对您有所帮助。

- JSG

-1

Flexbox 可能是一个不错的选择：

  .d-flex {
      display: -ms-flexbox;
      display: flex;
  }
  .flex-column {
      -ms-flex-direction: column;
      flex-direction: column;
  }
  .ml-auto, .mx-auto {
      margin-left: auto;
  }
  mr-auto, .mx-auto {
      margin-right: auto;
  }
  .w-50 {
      width: 50%;
  }

<div class="d-flex flex-column mx-auto w-50">
  <p>Left aligned text</p>
  <p><em>Aenean sed lectus massa, quis fringilla magna. Morbiporta sapien quis ligula viverra condimentum non vel nunc. Ut ac pulvinar nibh. Sed vitae eros et purus ullamcorper fermentum eu a libero. Curabitur vitae dolor ligula, varius tincidunt arcu. Quisque lectus magna, semper sed tincidunt nec, mattis vel justo.</em></p>
  <p>Using <a href="https://getbootstrap.com/docs/4.1/utilities/flex/">Bootstrap 4</a> classes.</p>
</div>

- kwaaui

-3

<div style="text-align:center;">
    <div style="display:inline; text-align:left; margin:20px;"> <!-- or whatever width you want that block to be at -->
          Content here
     </div>
</div>

基本上，第一个 div 是你的包含元素。你需要设置文本居中。

然后，在你的块级 div（蓝色区域）中，你需要显示为内联元素并且文本左对齐，然后设置一个边距（当文本换行时你想要保留的白色空间）。

- James

1

这将给我完全相同的问题，就像1a和2a一样。 - JohnGB

不，只要将宽度设置为您不想超过的宽度，就可以了。这个div看起来会像2b一样。 - James

1

当文本换行时，它无法正常工作。在视觉上，文本区域的宽度（而不是 div 区域）太靠左了。 - JohnGB

不，对我来说它只是居中对齐的文本。从目前我所看到的情况来看，似乎没有办法在没有某种形式的JS来修改文本区域的宽度的情况下实现我想要的效果。 - JohnGB

如果你的 div 没有另一种背景颜色，它看起来就像居中对齐的文本，除非你的文本换行。 - James

显示剩余4条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- John · Accepted Answer

我知道这已经很老了，但是我遇到了同样的问题，并且我同意这些解决方法都无法解决。这个方法可能不是100％跨浏览器（没有测试），但它有效！

现在限制是必须自己输入换行符，但似乎在这种情况下需要这样做。

http://jsfiddle.net/28aef/2/

div.textContainer {
    text-align: center;
    border: 1px solid #000;
    height: 100px;
    padding: 10px 0;
}

div.textContainer p {
    display: inline-block;
    text-align: left;
}