2016-04-16 6 views
-1

margin-left: auto;margin-right:auto;を追加すると、ページ(またはそのコンテナ内)に画像を配置する必要がありますが、これは起こらないような場合があります。なぜ「margin-left:auto; margin-right:auto;」ですか?私のイメージを中心にしない?

URLはhttp://www.lslib.com/です。画像/sites/default/files/missionvision_statements.jpgをテーブルセルの中央に配置します。

どうすればいいですか?

ありがとう!

答えて

2

理由は、imgのfloatプロパティです。それを削除するか、上書きしてください。それ以外は必要ありません。 :)

3

margin-left: auto;margin-right:auto;は、ブロック要素を中央に配置するために使用され、幅が設定されている(親よりも小さいか、それ以外の場合は機能しない)ブロックに配置されます。

floated要素は左または右に配置する必要があります。したがって、要素(イメージ)をブロック要素にするか、またはtext-align: centerをそのコンテナに設定します(もちろんフロートを削除します)。

サイドノート:margin-left: auto;margin-right:auto;はしばしば(Brianによって提供される)以下のサンプル

img.not-block { 
 
    margin: 0 auto; 
 
} 
 
img.block { 
 
    display: block; 
 
    margin: 0 auto; 
 
}
<img src="http://placehold.it/30x30" class="not-block" /> 
 

 
<img src="http://placehold.it/30x30" class="block"/>

のように、速記CSSで書かれています
関連する問題