在html5中对齐图像

Question

我有这段代码：

<header>
    <div id="title">                
        <img alt="logo" src="/Content/logo.gif" />
    </div>
    <nav>
        <ul id="menu">
            <li>Products</li>
            <li>Auctions</li>
            <li>Segmentation</li>
        </ul>
    </nav>
</header>

产生这个：

我希望图像位于白框上方（它会根据图像对齐）。我该怎么做？

BTW我使用默认的asp.net mvc3模板。

感谢。

Answer 1

我假设你正在浮动这些元素。如果是这样，请尝试设置标题的溢出属性：

header {
   overflow: auto
}

Answer 2

如果您希望将其置于100px以上的自然位置，请使用此功能。

#title img {
   margin-top: 100px
}

或者这个：

#title img {
   position: relative;
   top: 100px;
}

Answer 3

如果您在Internet Explorer中对此进行测试＆lt; 9，确保使用

定义标记<header>

<script type='text/javascript'>document.createElement('header')</script>

或library并在尝试设置样式之前将其设置为块级元素（header{display:block}）。