html5中的对齐图像

html5中的对齐图像,html,css,Html,Css,我有以下代码: <header> <div id="title"> <img alt="logo" src="/Content/logo.gif" /> </div> <nav> <ul id="menu"> <li>Products</li> <li>A

我有以下代码:

<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>

  • 产品
  • 拍卖
  • 分段
这就产生了:

我希望图像将在白色框上方(它将根据图像对齐)。我该怎么做

顺便说一句,我使用默认的asp.net mvc3模板


谢谢。

我假设您正在浮动这些元素。如果是,请尝试设置标头的溢出属性:

header {
   overflow: auto
}

如果你想让它比自然位置高100像素,用这个

#title img {
   margin-top: 100px
}
或者这个:

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

如果在Internet Explorer<9中测试此功能,请确保使用

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

或者在尝试对其进行样式设置之前,先将其设置为块级元素(
标题{display:block}
)。

在上面还是上面?你能发布你的CSS吗?