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

Question

所以我想在我的导航中心放置一个没有图像的 h1，它还有 2 个元素并且它必须是响应式的。我尝试了几乎所有我能找到的东西，但是......主要适用于背景图像，并且 inline-block 我无法将其完美居中。

下面我已经尽力了，但是悬停不起作用，可能是 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

最简单的方法就是将徽标作为菜单的一部分，如下所示：

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

Answer 2

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

使 h1 使用 .logo class。然后设置绝对位置并居中。

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

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

CSS Responsive menu with h1 title (logo) centered

html

css

responsive-design

responsiveness