为什么 text-align 不对齐 div 中的文本？

Question

对齐div 中的文本是通过text-align 完成的。它通常工作正常：

<div style="text-align:right;border:1px solid red">
  this goes to the right
</div>

我有一段代码（在 vue.js 的帮助下生成的大型 HTML 中间）没有应用对齐。我强制了 div 的宽度，并希望其中的文本向右对齐：

8:00 有足够的空间向右移动，但它保持居中。 CSS 堆栈没有显示此元素的任何特殊内容：

这种对齐（或缺少）的原因可能是什么？

注意：我没有包括整个 HTML/SCSS 代码，因为它有很多 - 希望 CSS 堆栈就足够了吗？

Answer 1

由于您在此处使用display: flex，因此text-align 将不起作用。改变

div {
 justify-content: space-around;
}

到

div {
 justify-content: flex-end;
}

编辑：正如@Jacob Gray 通知的那样，在div 元素上添加display: flex 不是一个好主意。最好从div 中删除此属性并在需要的地方使用text-align

Answer 2

如果弹性容器的相关值未设置为 stretch 并且弹性项目的 flex-grow 未设置为 1，弹性项目会缩小以适应内容的宽度或高度。这意味着框的大小就是内容的大小，因此text-align 没有任何影响。 （当然还有flex-basis和width的因素，这里不讨论了。）

另请注意，直接包含在弹性容器中的文本会自动包装在匿名弹性项目中。

你可以通过在 flex 容器上设置这个来解决这个问题：

div.start_display {
  display: flex;
  justify-content: flex-end;
}

或者，如果您不需要 flex，请将其重置为默认块：

div.start_display {
  display: block;
  text-align: right;
}

或者，将其包装到另一个标签中，比如<span>：

div.start_display span {
  flex: 1;
  text-align: right;
}

您可能需要提高选择器的特异性级别，因为屏幕截图中并不清楚。