幾乎可以正常工作的垂直對齊

任何人都可以看到爲什麼以下方法不起作用。圖像在'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 2011-04-05 12:04:19

除非該圖像需要一個鏈接（或以其他方式實際元素），最簡單的解決辦法可能是把它做成一個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

完美，謝謝三十多歲。背景圖片工作正常。 – NickC 2011-04-05 13:59:09

幾乎可以正常工作的垂直對齊

回答

相關問題