CSS以h1标题（徽标）为中心的响应式菜单集中

Question

所以我想将一个没有图像的h1居中放置在我的导航中心，该导航有两个元素，它必须是响应式的。我尝试了几乎所有我能找到的东西，但是......主要用于背景图片，而使用内嵌块我无法将其完美居中。

下面我有我可以做的最好的，但悬停不起作用，可能导致h1宽度100％;

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
a { 
 
    text-decoration: none; 
 
    color: white; 
 
    text-shadow: 1px 1px 1px black; 
 
} 
 
li { 
 
    list-style: none; 
 
} 
 
header { 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 
ul li { 
 
    float: left; 
 
    display: block; 
 
    background-color: #232323; 
 
    width: 50%; 
 
    padding: 10px 0 10px 0; 
 
} 
 
ul li:hover { 
 
    background-color: black; 
 
} 
 
.logo { 
 
    position: relative; 
 
    top: -38px; 
 
}

<header> 
 
    <nav> 
 
    <ul> 
 
     <li><a href='#blog'>Blog</a> 
 
     </li> 
 
     <li><a href='#portofolio'>Portofolio</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
    <a href='#/' class='logo'><h1>Tao SandBox</h1></a> 
 
</header>

它必须是一个更好的办法！

http://codepen.io/taosx/pen/vNWojo?editors=110

Answer 1

http://codepen.io/anon/pen/OyOKrN

充分利用H1使用。标志类。然后设置绝对位置并居中。

.logo { 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    text-align:center; 
} 

我还建议在导航之前添加h1标记，以保持更好的语义流。

<header> 

    <nav> 
     <h1 class='logo'><a href='#/' >Tao SandBox</a></h1> 
     <ul> 
      <li><a href='#blog'>Blog</a></li> 
      <li><a href='#portofolio'>Portofolio</a></li> 
     </ul> 
    </nav> 

</header> 

Answer 2

最简单的方法就是使菜单的logo`部分，像这样：

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 
a { 
 
    text-decoration: none; 
 
    color: white; 
 
    text-shadow: 1px 1px 1px black; 
 
} 
 
ul { 
 
    overflow: hidden; 
 
} 
 
li { 
 
    list-style: none; 
 
} 
 
header { 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    background-color: #232323; 
 
} 
 
ul li { 
 
    float: left; 
 
    width: 33%; 
 
    vertical-align: middle; 
 
} 
 
ul li:hover { 
 
    background-color: black; 
 
}

<header> 
 
    <nav> 
 
    <ul> 
 
     <li><a href='#blog'>Blog</a> 
 
     </li> 
 
     <li><a href='#/' class='logo'><h1>Tao SandBox</h1></a> 
 
     </li> 
 
     <li><a href='#portofolio'>Portofolio</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</header>