【CSSメモ】画像だけを中央に表示するには

Posted by kumacchi on 2010年12月7日 , No comment

sample01

あいうえおかきくけこさしすせそたちつうてとなにぬねのはふふへほまみむめもやゆよわをん

ここではわかりやすく黒いボーターを表示したdivタグに囲まれた画像と文字列がある場合で、画像だけ中央寄せにしたい時どうすればいいか？

div.sample01,div.sample02,div.sample03{
    margin-top:10px;
    padding:10px;
    width:200px;
    height:200px;
    border:1px solid #000000;
}

文字と画像の両方とも中央に寄せる場合は単純にtext-align:center;を指定すればいいが、画像だけの場合そうは行かない。

<div class="sample01">
<A HREF="http://blog.with2.net/link.php?620913" title="ブログランキング"><img src="https://blog.kumacchi.com/img/br_banner_rainbow.gif" alt="ブログランキング"></A><br>
あいうえおかきくけこさしすせそたちつうてとなにぬねのはふふへほまみむめもやゆよわをん
</div>

画像だけ中央に寄せるためにmargin-leftとmargin-rightにautoを指定する事を思いつくが、実際に設定してみてもこれはうまくいかない。

div.sample01 img{
margin-left:auto;
margin-right:auto;
}

それはなぜかというと、imgはインライン要素なので上記のスタイルシート設定は意味をなさない。（単にマージンを指定するのには使える。）

sample02

あいうえおかきくけこさしすせそたちつうてとなにぬねのはふふへほまみむめもやゆよわをん

ではどうすればいいかのかと言うと、display属性を使って、imgをインライン属性からブロック属性に変更してあげればいい。

div.sample02 img{
    margin-left:auto;
    margin-right:auto;
    display:block;
}

これで、中央に表示されるようになる。注意点としては、ブロック属性はdivタグなどを想像するとわかるように前後に改行がのでその分隙間が開く事になる。ブロック属性の改行とbrタグ分隙間が増えるのでbrタグを削除すればsample01と同じ改行幅になる。

sample03

あいうえおかきくけこさしすせそたちつうてとなにぬねのはふふへほまみむめもやゆよわをん

<div class="sample03">
<p class="s2"><A HREF="http://blog.with2.net/link.php?620913" title="ブログランキング"><img src="https://blog.kumacchi.com/img/br_banner_rainbow.gif" alt="ブログランキング"></A></p>
あいうえおかきくけこさしすせそたちつうてとなにぬねのはふふへほまみむめもやゆよわをん
</div>

div.sample03 p.s2{
text-align:center;
}

もっと単純に、画像をブロック属性のタグで囲んでそこにtext-align:centerを設定するという方法もあるが、タグやスタイルシートの記述なと修正点が増加するし設定も煩雑な感じになる。

(Visited 325 times, 1 visits today)

タグ : スタイルシート