ITの隊長のブログ

ITの隊長のブログです。Rubyを使って仕事しています。最近も色々やっているお(^ω^ = ^ω^)

テキストをど真ん中にしたい!CSSでテキストをど真ん中にする方法

スポンサードリンク

http://www.flickr.com/photos/18155385@N00/110995239
photo by geirarne



今日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>
.main {
	width: 1000px;
	height: 500px;
	background-color: #aaaaaa;
}


ブラウザに移すとこんな感じ


f:id:aipacommander:20150113211356p:plain


このbackground-colorがグレーなところで、ど真ん中にテキストを持ってきたいのだ。


ちなみに、今回環境はGoogle Chromeです。(それ以外は試していません)


と、いうことで、まずはtext-alignを使ってみる。

.main {
	width: 1000px;
	height: 500px;
	background-color: #aaaaaa;
	/* 追加 ・ω・)つオラヨ */
	text-align: center;
}


結果


f:id:aipacommander:20150113211352p:plain


うむむ・・・真ん中にはきているけど、ど真ん中じゃない。縦で真ん中じゃない。。。


でも、まぁ正直なところ予想通り。


やりかたはわからなかったので、調べてみると、line-height使えばいいよ。って記事を見つけた。


早速使ってみる。

.main {
	width: 1000px;
	height: 500px;
	background-color: #aaaaaa;

	/* 追加 ・ω・)つオラヨ */
	text-align: center;

	/* どのくらい追加すればわからなかったのでまずは200px */
	line-height: 200px;
}


結果


f:id:aipacommander:20150113211345p:plain


お! 動いたよ! 縦に動いたよ!


でも、ちょこっとしか動いていない。どうやら、height:500pxと同じ値にすればいいようだ。

.main {
	width: 1000px;
	height: 500px;
	background-color: #aaaaaa;

	/* 追加 ・ω・)つオラヨ */
	text-align: center;

	/* heightと同じにしてみる */
	line-height: 500px;
}

結果


f:id:aipacommander:20150113211400p:plain


出来たー!!! キタ━(゚∀゚)━!


簡単ですが、結構おもろかった。


おわり