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 %}

和班级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

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

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

Answer 2

您并没有真正给我们足够的信息，这取决于{{ 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时，它会失败。使用“内边距”为该div添加边距，然后再次使用。

Answer 3

使用文本对齐文本...它不会使元素本身居中......

text-align：center没有工作

3 个答案: