「WBS」「ガイアの夜明け」「がっちりマンデー!!」「カンブリア宮殿」などのテレビ番組で気になったニュースからお金と仕事を考えて豊かな生活を目指します。

[HTML] 縦方向の中央に配置する方法の続き

2016年1月24日

HTML / CSS

昨日書いた「[HTML] 要素の高さが不明でも縦方向の中央に配置する方法」以外にも中央に置く方法が書かれていたサイトを発見しました。
それも、IE8にも対応しているそうです。

  • IE8以前は可能
  • IE9は可能
  • IE10は可能
  • IE11は可能
  • Chromeは可能
  • Firefoxは可能
  • Safariは可能
  • Operaは可能
【CSS】要素を上下左右に中央寄せする色々な方法

DEMO

Sample text

html

    <div class="sample_box">
        <div class="sample">Sample text</div>
    </div>

css

    .sample_box{
        width: 60%;
        height: 200px;
        background: #fafafa;
        border: 1px solid #ccc;
        position: relative;
    }
    .sample{
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        width: 100px;
        height: 100px;
        background: #eee;
    }

IE8にも対応しているところが素敵ですよね。
応用も色々と出来そうですので、昨日のコードと共に活用していきたいと思います。

  • ブログランキングへ
  • にほんブログ村

カテゴリー:HTML / CSS
タグ:

コメントを残す

プロフィール

嫁と4歳の息子の3人暮らしの30代後半のサラリーマンです。
詳しいプロフィール

カレンダー

2017年5月
« 4月    
1234567
891011121314
15161718192021
22232425262728
293031  
  • ブログランキングへ
  • にほんブログ村

TOPに戻る