「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年3月
« 2月    
 12345
6789101112
13141516171819
20212223242526
2728293031  
  • ブログランキングへ
  • にほんブログ村

TOPに戻る