文本对齐：中心不起作用

Question

我正在尝试使用 python flask 开发一个小型网站，但我不明白为什么 text-align: center 不起作用。

html页面有一个表单变量，用于打印错误信息。

{% for message in form.name.errors %}
<div class="flash">{{ message }}</div>
{% endfor %}

{% for message in form.message.errors %}
    <div class="flash">{{ message }}</div>
{% endfor %}

和 class flash 定义：

/* Message flashing */
.flash{
    background-color: #FBB0B0;
    padding: 10px;
    width: 400px;
    text-align: center; 
}

而且它不起作用，它总是显示在左侧，有人知道为什么吗？

我试试这个：

{% for message in form.name.errors %}
    <div style="background-color: #FBB0B0; text-align: center;">{{ message }}</div>
{% endfor %}

{% for message in form.message.errors %}
    <div style="background-color: #FBB0B0; text-align: center;">{{ message }}</div>
{% endfor %}

它有效，但是当我将它放入 css 文件时：

.flash{
    background-color: #FBB0B0;
    text-align: center; 
}

没用。

Answer 1

在处理文本时使用文本对齐...它不会使元素本身居中...

Answer 2

使用您的开发工具（右键单击并 'inspect element'）查看问题。正如其他人所说，这将使 div 的内容居中。要使 div 本身居中，它必须是：

display: block;（div 通常是）
给定宽度
margin: 0 auto;

Answer 3

你没有真正给我们足够的信息，这取决于 {{ message }} 解决的问题。

但在这里您可以看到不同元素的行为方式：

.flash{
    background-color: #FBB0B0;
    padding: 10px;
    width: 400px;
    text-align: center; 
}

.inner {
  width: 100px;
  background: #000;
  color: #fff;
  }

.inner-margin {
  margin: auto;
}

<div class="flash">Message</div>

<div class="flash"><div class="inner">Message</div></div>

<div class="flash"><div class="inner inner-margin">Message</div></div>

如您所见，仅使用文本的 'flash' 工作正常，但是当您插入具有宽度的 'inner' div 时，它会失败。使用 'inner-margin' 为 div 添加边距，它再次起作用。

文本对齐：中心不起作用

text-align: center didn't work

css

text-align