Question

小提琴： http://jsfiddle.net/uK7w6/1/

<h1>this is a really, really long sentence</h1>

h1 {
    min-width:100px;
    max-width:100px;
    text-align:center;
}

如果你摆脱了最大和最小宽度，句子中心很好，但是我想让它居中并且不占据整个宽度。添加宽度约束时，为什么文本左对齐？

Answer 1

h1中的文字实际上是居中的，但它位于100px width box的中心位置。如果您希望h1在window的中间浮动，则添加margin:0 auto;。 h1与左侧对齐的主要原因与display:box属性有关。

<h1>this is a really, really long sentence</h1>
<style type="text/css">
h1 {
    min-width:100px;
    max-width:100px;
    text-align:center;
    margin:0 auto;
}
</style>

Answer 2

这是因为“句子”这个词的宽度超过了100px，默认情况下，文本只会在空格处断开。将其更改为以下[虽然它可能使其更难阅读]：

h1 {
  min-width:100px;
  max-width:100px;
  text-align:center;
  -ms-word-break: break-all;
  word-break: break-all;
  // Non standard for webkit
  word-break: break-word;

  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

或者扩大范围。您可以使用margin：0 auto; - 但是单词句子仍然不会在h1中居中。

编辑：这可能是您实际想要实现的目标。

如果您想在新行上强制每个单词并保持较长的单词居中，您可以执行以下操作：

h1 {
  min-width:200px;
  max-width:200px;
  text-align:center;
  white-space: pre-line;
}

<h1>this 
is 
a 
really, 
really
long
sentence</h1>

white-space：pre-line;将在html中的换行符处放置换行符。你仍然必须使整个元素尽可能宽泛。

http://jsfiddle.net/uK7w6/1/

最小和最大宽度弄乱了文本对齐中心

2 个答案: