2016年7月11日月曜日

CSSで簡単に上下左右中央に文章や画像を表示する方法

今回はCSSを使って上下左右中央(ブラウザの真ん中)に文章や画像を配置してみましょう。

対応ブラウザはIE10以降とモダンブラウザです。


【1】HTMLとCSSファイルを用意します

※用意したCSSファイルへのパスはご自分の環境に合わせて変更してください。

(HTMLソース)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/center_elements.css">
<title>CSSで簡単に上下左右中央に文章や画像を表示する方法</title>
</head>

<body>

<article>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</article>

   
</body>
</html>



【2】CSSもしくはSASSを記述していきます。

(1) CSSの簡単なリセットと中央表示のスタイルを指定します。

※下記CSSはgulpでSassからCSSへ変換し
自動でベンダープレフィックスを追加したソースです。

詳しくはこちらを参照ください。


@charset "UTF-8";
/*------------------------------------
    簡単なリセット
-------------------------------------*/
* {
  margin: 0;
  padding: 0;
}

/*------------------------------------
    上下左右中央に表示するスタイル
-------------------------------------*/
body,
html {
  height: 100%;
}

article {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
}

article p {
  max-width: 50%;
  padding: 10px;
  background: #ccc;
}


(Sassで記述した場合)

/*------------------------------------
    簡単なリセット
-------------------------------------*/

* {
    margin:0;
    padding:0;
}


/*------------------------------------
    上下左右中央に表示するスタイル
-------------------------------------*/

body,
html {
    height:100%;
}

article {
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%;
    p {
        max-width:50%;
        padding:10px;
        background:#ccc;
    }
}


自動でベンダープレフィックスを追加してくれるので
上記記述だけで楽ですね。


どうでしたでしょうか?
テキストの箇所を画像に変えたり、横幅を変えたりして色々応用できそうですね。


下記サイトを参考にさせていただきました。


Quick Tip: The Simplest Way To Center Elements Vertically And Horizontally


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

ブログ王ランキングに参加中!

0 件のコメント:

コメントを投稿