今日CSSで学んだことをメモ。
こんな感じのhtmlとcssがあります。
- 20150113.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="20150113.css"> <title>Document</title> </head> <body> <h1>てすとだYO-ん</h1> <div class="main"> <p>こいつをど真ん中にしたい</p> </div> </body> </html>
- 20150113.css
.main { width: 1000px; height: 500px; background-color: #aaaaaa; }
ブラウザに移すとこんな感じ
このbackground-colorがグレーなところで、ど真ん中にテキストを持ってきたいのだ。
ちなみに、今回環境はGoogle Chromeです。(それ以外は試していません)
と、いうことで、まずはtext-alignを使ってみる。
- 20150113.css
.main { width: 1000px; height: 500px; background-color: #aaaaaa; /* 追加 ・ω・)つオラヨ */ text-align: center; }
結果
うむむ・・・真ん中にはきているけど、ど真ん中じゃない。縦で真ん中じゃない。。。
でも、まぁ正直なところ予想通り。
やりかたはわからなかったので、調べてみると、line-height使えばいいよ。って記事を見つけた。
早速使ってみる。
- 20150113.css
.main { width: 1000px; height: 500px; background-color: #aaaaaa; /* 追加 ・ω・)つオラヨ */ text-align: center; /* どのくらい追加すればわからなかったのでまずは200px */ line-height: 200px; }
結果
お! 動いたよ! 縦に動いたよ!
でも、ちょこっとしか動いていない。どうやら、height:500pxと同じ値にすればいいようだ。
- 20150113.css
.main { width: 1000px; height: 500px; background-color: #aaaaaa; /* 追加 ・ω・)つオラヨ */ text-align: center; /* heightと同じにしてみる */ line-height: 500px; }
結果
出来たー!!! キタ━(゚∀゚)━!
簡単ですが、結構おもろかった。
おわり