DivタグとCSSを使用すると画像とテキストが垂直に整列しない

Question

私はCSSでそれほど優れていません。私はプロパティが一緒に働く方法を得るが、時には私が望む結果を得ることができない。私はロゴといくつかのテキストを含む私のページの上部にバナーを持っています。 大きなdivタグで別々のdivタグに含まれていますが、画像が垂直方向の中央に表示されているときにテキストがdivタグの上部に揃えられます。どのようにセンターを垂直に並べるのですか？

<div id="webBanner"> 
    <div id="bannerImage"> 
      <a href="Dashboard.aspx" title="Accreditation Data"> 
      <img src="Images/logo.png" /> 
      </a> 
    </div> 
    <div id="bannerText"> 
     Accreditation Database (AD) 
    </div> 
</div> 

CSS：

#webBanner 
{ 
    height: 60px; 
    width: 100%; 
    vertical-align: top; 
} 

#bannerText 
{ 
    font-family: Arial; 
    font-size: xx-large; 
    font-style: italic; 
    color: #fff; 
    margin: 2px 5px; 
} 

#bannerImage 
{ 
    height: inherit; 
    float:left; 
    width: 223px; 
    vertical-align: middle; 
    margin: 2px 5px; 
} 

Answer 1

#bannerText { 
    line-height: 60px; 
} 

は、あなたの文章を考える

Answer 2

はdivの内側にある、これは働くかもしれ..一つの方法です：

#bannerText { 
    vertical-align: middle; 
} 

this clear tutorial用を参照してください。あなたのオプションに関する詳細情報。

Answer 3

CSS垂直整列は、ほとんどの人が期待する方法では機能しません。この特定のケースでは、実際には何もしません。

あなたがしたいことは、bannerText要素のパディングでこれを解決することです。例えば

は、垂直中心60PXラッパーにおける20ピクセルテキストに：

#webBanner { 
    height: 60px; 
    width: 100%; 
} 

#bannerText { 
    font-size: 20px; 
    height: 20px; 
    padding: 20px 0; 
    /* 20px padding on top and bottom plus 20px height = 60px total */ 
} 

注、パディング0は、左右のパディングを指します。あなたのバナーのデザイン方法に応じて調整したいかもしれません。

divの唯一のコンテンツがテキストで、行の高さが調整されていない場合は、「height：20px」宣言も冗長です。私は一般的な解決法を提供するためにそれを含めました。私はこの線に沿って何かをお勧めします

Answer 4

...

HTML：

<div id="webBanner"> 
<a id="bannerLink" href="Dashboard.aspx" title="Accreditation Data"> 
    <img src="Images/logo.png" /> 
</a> 
<h1>Accreditation Database (AD)</h1> 
</div> 

CSS：あなたがにCSSを調整することができます

#webBanner 
{ 
    height: 60px; 
} 

#webBanner h1 
{ 
    color: #fff; 
    float: left; 
    font-family: Arial; 
    font-style: italic; 
    line-height: 60px; 
} 

#bannerLink 
{ 
    display: block; 
    float: left; 
    height: 60px; 
    width: 223px; 
} 

が垂直方向にロゴ画像をセンタリングmargin:を使用してください。