Search code examples
csstext-align

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.

Solution

  • 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;