Html 将左对齐的短文本块居中

很容易将边距为0的长文本居中，并使用边距或填充来控制距离

但是，是否可以在不知道宽度的情况下将文本居中，并且该文本是否向左对齐

• 短文本居中
• 文本左对齐
• 我不知道宽度

下面是要检查的示例：

CSS:

HTML:

长长的，长长的，长长的，长长的，长长的，长长的，长长的，长长的，长长的，长长的，长长的，长长的，长长的，长长的，长长的，长长的，长长的，长长的，长长的，
短，短，短

短，短，短，短，短，短

短，短

使用“边距自动”居中时，需要设置宽度。您的

margin

属性中也有语法错误

#short {
    margin:50px auto;
    text-align:left;
    width:300px;
}

---

您可能认为您已经将长元素居中，但这只是因为它的空间不足，而

100px

填充迫使两侧出现间隙。如果您希望将其真正居中，您也需要在此设置

width

属性。

如果您允许自己执行以下操作，则可以轻松完成此操作：

<div class="wrap">
    <div id="short">short, short, short
        <br>short, short, short, short, short, short
        <br>short, short</div>
</div>

参见小提琴：

内联块

将收缩以包装您的内容，并且仍然响应为父容器声明的

文本对齐：居中

属性

为什么内联块与块比较

---

块

将使用最大可用宽度，通常是父容器的宽度<代码>内联块将缩小以适应（w3.org文档中的术语！），这通常会使您的宽度小于父容器的宽度，这样就可以对中了。

边距：50px自动

在没有固定宽度的情况下是没有用的。我不确定我是否理解您的示例-您不能在

short

div上设置相同的填充吗？如果不能做到这一点，请在两个文本上设置相同的宽度。我更新了问题：如果文本左对齐，是否可以在不知道宽度的情况下将文本居中？非常欢迎，感谢您花时间以清晰、简洁的方式阐述您的问题。这就是问题的关键：左对齐文本居中的唯一方法是知道宽度？很好的解决方案！简洁明了。谢谢。只是想了解一下：内联块工作而不显示：block有什么特殊原因吗？好问题：答案是在默认情况下

width:auto

如何计算宽度<代码>块将使用最大可用宽度，通常是父容器的宽度<代码>内联块将缩小以适应（w3.org文档中的术语！），这通常会使您的宽度小于父容器的宽度，从而允许居中工作。

#short {
    margin:50px auto;
    text-align:left;
    width:300px;
}

<div class="wrap">
    <div id="short">short, short, short
        <br>short, short, short, short, short, short
        <br>short, short</div>
</div>

.wrap {
    text-align: center;
}
#short {
    margin:0px;
    auto;
    text-align:left;
    outline: 1px dotted blue;
    display: inline-block;
}