Question

任何人都可以看到以下为什么不起作用。图像在“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>

Answer 1

除非该图像需要是链接（或其他实际元素），否则最简单的解决方案可能是将其转换为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>

垂直对齐几乎工作

1 个答案: