text-align：center did not work

Question

私は小さなウェブサイトを開発するためにPythonフラスコを使用しようとしていますが、なぜ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; 
} 

did't作品。

Answer 1

問題を参照してください（右クリックして、「要素を検査」）あなたのdevのツールを使用してください。他の人が言ったように、それはそのdivの内容を中心にします。 div要素自体を中央にそれがなければならない：

1. display: block;（通常されているのdivた）
2. 幅あなたは本当に私たちに十分な情報を与えられていませんでした
3. margin: 0 auto;

Answer 2

テキストでの作業中にテキスト揃え...それは要素自体を中央にいないだろう...

Answer 3

、それを考えると{{ message }}が解決するものに依存します。

しかし、ここであなたはどのように異なる要素が振る舞う見ることができます：あなたが見ることができるように、単なるテキストとの「フラッシュ」は正常に動作しますが、あなたは「内部」のdivを挿入したとき

.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>

幅では、失敗します。そのdivに余白を 'inner-margin'で追加すると、再び機能します。