タイトルを上下中央に表示したい

回答率: 85.48%

質問するログイン新規登録

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

新規登録して質問してみよう

ただいま回答率: 85.48%

トップ HTML5に関する質問

Q&A

解決済

1回答

1720閲覧

タイトルを上下中央に表示したい

総合スコア236

0グッド

0クリップ

投稿2015/07/20 03:07

0

0

HTML5を使ってタイトルを表示したいのですが、どうしても文字の位置をアップする事ができません。
すいませんが、ヒントを教えて下さい。

<DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	
	<style type="text/css">
		html, body 
		{
			font-family: "メイリオ";
			margin: 0;
			padding: 0; 
			width:100%;
			height:100%;
			background-color: #FAFAFA;
		}
	
		div#header
		{
		    position: fixed;
		    top: 0px;
		    left: 0px;
		    width: 100%;
		    height: 60px;
			background-color:#51A2C1; 
		}
	</style>
</head>
<body>
    <div id="header">
		<h2>テスト</h2> <!-- このテストという文字の位置を少しだけ上げたい -->
	</div>
</body>
</html>

行動規範の内容に同意します

回答1件

0

ベストアンサー

cssのdiv#header{}内に、
line-height: 1em;
を入れます。

投稿2015/07/20 03:12

総合スコア1151

2015/07/20 03:14

ちなみに、<DOCTYPE html>は、<!DOCTYPE html> が正しいです。「!」不足。

2015/07/20 03:18 編集

上下中央にするなら、下記を追加します。(前述のline-height: 1em;は入れない) div#header h2 { 　margin: 0; 　line-height: 60px; }

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

関連した質問

トップ HTML5に関する質問

タイトルを上下中央に表示したい