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

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

<header>
<a href="#" title=""><img class="logo" src="img/[e-mail]" 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 回答日時： 2013/05/02 19:05

HTML5で最も重要なことは文書の構造の正確なマークアップです。

<header>
<a href="#" title=""><img class="logo" src="img/[e-mail]" title="logo"></a>
<h1 class="title">h1.title</h1>
</header>
のようにA要素(行内要素)が直接<header></header>内にあるのはおかしいです。
<header>
　　<p><a href="#" title=""><img class="logo" src="img/[e-mail]" title="logo"></a></p>
　　<h1>h1.title</h1>
</header>
ないし、
<header>
　　<h1><a href="#" title=""><img class="logo" src="img/[e-mail]" 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 回答日時： 2013/05/03 05:01

img.logo{vertical-align:middle;}

h1{display:inline;}

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