垂直アラインメントがほとんど動作しています

誰も次のようなことがうまくいかない理由を知ることができますか？画像はVCentInner内で垂直方向に正しくセンタリングされますが、次のタイトルテキストはVCentInner内で垂直方向に表示されるのではなく、画像の上に揃えられているようです。垂直アラインメントがほとんど動作しています

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <style> 
      * { 
    margin: 0; 
    } 
    html, body { 
    height: 100%; 
    } 
    #container { 
    min-height: 100%; 
    } 

    #header{ 
    position: absolute; 
    top: 0px; 
    height: 10em; 
    width: 100%; 
    background-color: blue; 
    } 
    .VCentOuter { 
    top: 0; left: 0; width: 100%; height: 100%; position: absolute; display: table; 
    background-color: green; 
    } 
    #headinner{ 
    height: 8em; 
    background-color: yellow; 
    } 
    .VCentInner { 
    display: table-cell; vertical-align: middle; 
    background-color: pink; 
    } 

    #header img { 
    float: left; 
    <!--height: 2em;--> 
    background-color: yellow; 
    } 
    #title{ 
    text-align: center; 
    color: black; 
    } 
    #clearheader{ 
    height: 10em; 
    } 


    .centered{ 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    } 
    .txtcenter{ 
    text-align: center; 
    } 

    #content{ 
    border: 1px red dotted; 
    } 

    #menu { 
     position: absolute; 
     bottom : 0px; 
     width:100%; 
     height: 2em; 
     background: cyan; 
     overflow:hidden; 
    } 


     </style> 
    </head> 
    <body> 
     <div id="container"> 
      <div id="clearheader"></div> 
      <div id="content"> 
       Content 
      </div> 
     </div> 
     <div id="header"> 
      <div class="VCentOuter" id="headinner"> 
       <div class="VCentInner" id="title"> 
        <img src="images/burgee2.gif"/> 
        Title text 
       </div> 
      </div> 
      <div id="menu"> 
       Menu goes here - tab1 - tab2 - tab3 - tab4 - tab5 - tab6 - tab7 - tab8 - tab9 - tab10 - tab11 - tab12 
      </div> 
     </div> 
    </body> 
</html>

出典

2011-04-05 NickC

まず、 '<！ - height：2em; - >はCSSでのコメント方法ではありません。代わりに '/ * height：2em; * /'を使用してください。 – thirtydot

そのイメージがリンク（または実際の要素）にする必要がある場合を除き、最も簡単な解決策は、CSS background-imageにそれを作るために、おそらくです：

<div class="VCentInner" id="title"> 
    Title text 
</div>

余分なCSSの場合：

#title { 
    background: url(http://dummyimage.com/100x100/000/fff) left center no-repeat 
}

それが要素である必要がない場合：

<div class="VCentOuter" id="headinner"> 
    <div class="VCentInner" style="width: 100px"> 
     <img src="http://dummyimage.com/100x100/000/fff" /> 
    </div> 
    <div class="VCentInner" id="title"> 
     Title text 
    </div> 
</div>

出典

2011-04-05 12:16:01 thirtydot

パーフェクト、感謝thirtydot。背景画像は正常に動作します。 – NickC

垂直アラインメントがほとんど動作しています

答えて

関連する問題