CSSで中央に配置する方法
CSSで画像やブロックレベル要素などを中央に配置、つまり上下左右中央寄せにする方法を紹介します。
イメージ
１．問題点
以前、「CSSで背景画像をページの中心に表示する方法」をエントリーしました。
今度は通常の画像をページの中心に表示されるよう配置したいのですが、CSSの設定方法が不明です。
２．画像をページの中心に表示する
画像をページの中心に表示するには、中心に表示させたいimg要素に次のように記述します。
<style>
.foo {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
</style>
<img class="foo" src="foo.png" alt="foo" />または
<style>
.foo {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
</style>
<img class="foo" src="foo.png" alt="foo" />Google Chrome/Firefoxは上記で画像が中心にくることを確認できました。
IEの場合、ページの先頭に
<!doctype html>を書いておかないと期待する動作にならないようです。
３．ウィンドウサイズにあわせて画像を縮小する
さらにウィンドウサイズにあわせて画像を縮小するには、下記のmax-width/max-heightプロパティを追加します。
max-width: 100%;
max-height: 100%;４．ブロック要素をページの中心に表示する
ブロック要素をページの中心に表示するには、ブロック要素にwidthプロパティとheightプロパティを追加します。
<style>
.foo {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 100px;
height: 100px;
background: #f00;
}
</style>
<div class="foo"></div>５．参考サイト
参考サイトは下記です。ありがとうございました。
Posted by yujiro このページの先頭に戻る
- YouTube動画にキャプションをつけてテキストを回り込ませる方法
- 画像を下揃えにしてテキストを回り込ませる方法
- style要素にCSSの擬似要素は記述可能か？
- position:relativeを設定すると他の要素がずれる場合の対処
- CSSでタブ切り替えする方法
- :target擬似クラスのまとめ
- CSSでヘッダを固定したスクロールテーブルを作る方法
- レスポンシブウェブデザインで画像を縮小する方法
- disabledなボタンのhoverのスタイルを無効にする方法
- HTML要素を別の要素を基点にしてCSSで絶対配置する方法
- :not擬似クラスでCSS3のサポートをチェックする方法
- :checked擬似クラスでチェックボックスに連動して要素を表示させる方法
- ol要素の入れ子で親の番号を子に割り当てる方法
- チェックボックスやラジオボタンを大きくする方法
- CSSで背景画像をページの中心に表示する方法
トラックバックURL
コメントする
greeting
