32

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

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

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

在此处输入图像描述

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

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

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

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

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

4

5 回答 5

11

我知道这很旧，但我也遇到了同样的问题，我同意这些都不能解决它。这个可能不是 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;
}
于 2013-02-20T21:54:23.813 回答
0

我知道这是旧的，但尚未得到答复。至少可以使用calc() vh 和 vw(viewport units) 以及一些数学来完成。诀窍似乎是手动将左侧和顶部设置为居中。我使用视口单位是因为它们的准确性和不断变化的效果。

    .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 方法存在问题后，我遇到了这篇文章并找到了解决方法。我希望它有所帮助。

于 2018-04-22T08:32:41.440 回答
0

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>

于 2018-09-21T03:31:58.113 回答
0

我猜这早已成为原始海报的非问题，但我有同样的问题并且正在谷歌搜索寻找答案。以下是我发现的结果。

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

<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 几乎没有变化。根据需要定制百分比或指定像素宽度，您应该已准备就绪。希望这可以在某些时候为某人节省一些时间，并且不会产生任何新问题。祝大家好运。

于 2017-08-22T15:04:29.250 回答
-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（蓝色区域）中，您需要显示内联和文本左对齐，然后设置边距（文本换行时要在其周围保留的空白）。

于 2012-01-02T16:02:35.730 回答