h1を親要素の縦中央、画像の横に配置する方法

質問

h1を親要素の縦中央、画像の横に配置する方法を探しています。

<header>
<a href="#" title=""><img class="logo" src="img/logo@1x.png" title="logo"></a>
<h1 class="title">h1.title</h1>
</header>
.header-container{height:200px;margin:0;}
.logo{float:left;}
.title{display:inline-block;margin:0;}

どうすればよいでしょう？

回答No.1

ORUKA1951 · ベストアンサー

HTML5で最も重要なことは文書の構造の正確なマークアップです。
<header>
<a href="#" title=""><img class="logo" src="img/logo@1x.png" title="logo"></a>
<h1 class="title">h1.title</h1>
</header>
のようにA要素(行内要素)が直接<header></header>内にあるのはおかしいです。
<header>
　　<p><a href="#" title=""><img class="logo" src="img/logo@1x.png" title="logo"></a></p>
　　<h1>h1.title</h1>
</header>
ないし、
<header>
　　<h1><a href="#" title=""><img class="logo" src="img/logo@1x.png" title="logo"></a>h1.title</h1>
</header>

あるいは、単純に
<header>
　<h1><a href="/">サイトタイトル</a></h1>
</header>

でしょう。class名を書く必要は全くありません。
　　　　　^^^^^^^^^class名は、要素では文書構造を表しきれないときに使います。デザインのためではありません。

＞h1を親要素の縦中央、画像の横に配置する方法を探しています。
　親要素は<header></header>になります。<header>要素は内容やフォントサイズによって変化するため、出来ません。

　画像(logo)のサイズがすでにわかっているなら
<header>
　<h1><a href="/">サイトタイトル</a></h1>
</header>
に対して、
header h1{text-align:center;}
header h1 a{dispaly:inline-bock;position:relative;}
header h1 a:before{content:url();left:-80px;top:-40px;}
としたりします。画像が80px×80pxのとき

　そのまえにHTML4.01strictをしっかり身につけられるほうがよいかと思います。HTML5は古いIEでは使えませんから・・

回答No.2

naokita

img.logo{vertical-align:middle;}
h1{display:inline;}

--------------------
１、HTML5ではなく、互換性を考慮した方が良いのでは？　CSSが合って無いよ・・・
２、各クラスも親要素のIDやclassのセレクタを利用
３、画像パスに＠は利用しない方が良いよ。