Smith John Smith John - 3 months ago 21
CSS Question

text-align: center didn't work

I am trying to use python flask to develop a small website, but I can't figure out why that text-align: center didn't work.

there is a form variable passed into the html page, used to print the error message.

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

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


and the class
flash
define:

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


And it didn't work, it always show up in the left side, anybody know why?

I try this:

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


it works, but when I put it into css file:

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


did't work.

Answer

Use your dev tools (right click and 'inspect element') to see the problem. As the others have said, that will center the contents of that div. To center the div itself it has to be:

  1. display: block; (which divs normally are)
  2. Given a width
  3. margin: 0 auto;