html - 当您无法在 html 中正确定位图像时该怎么办？

Question

下面的 css 代码是我在尝试创建像 mashable.com 这样的固定标题时编写的，但是无论我多么努力，我似乎​​都无法使 logo.png 以 margin:auto 19px; 出现。请帮助我和告诉我我做错了什么。我是 html 和 css 的初学者，所以请保持温柔。我希望 Logo 和导航列表位于一行中。

header{position:fixed;
   background:#333;
   height:128px;}

h1{    display:inline;
       float:left;
   background:url(images/logo.png) no-repeat;
       width:289px;height:47px;
       margin:
       text-indent:-9999px;}

nav {   

         height:26px;
         float:right;
     margin-top:19px;
     width:631px;}

nav ul li{
          display:inline;}  

这是 html:

<header>
    <h1>logo</h1>
    <nav>
        <ul>
            <li>Categories</li>
            <li>Search</li>
            <li>About me</li>
            <li>Contact me</li>                 
            <li>Social</li>
        </ul>
    </nav>
</header>

Answer 1

Margin auto 仅适用于 block 元素，不适用于行内元素。如果您希望 Logo 居中，请更改 h1 css 中的两件事:

1. 更改为display: block;
2. 移除 float: left;

显然也添加了边距值，但我假设这只是一个复制/粘贴拼写错误。