Адаптивное меню CSS с заголовком (логотипом) h1 по центру

Итак, я хочу центрировать h1 без изображения в центре моей навигации, которая имеет еще 2 элемента, и она должна быть отзывчивой. Я пробовал почти все, что мог найти, но... работает в основном с фоновыми изображениями, а со встроенным блоком я не могу идеально отцентрировать его.

Ниже у меня есть лучшее, что я мог сделать, но наведение не работает, вероятно, из-за ширины 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


html css responsive-design responsiveness
person TaoJS    schedule 19.10.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

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

Заставьте h1 использовать класс .logo. Затем установите абсолютное положение и отцентрируйте его.

 .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>
person bingo    schedule 19.10.2015
comment
Благодарю вас! :D Ты настоящий mvp! - person TaoJS; 19.10.2015
comment
Если вас беспокоят цвета фона при наведении курсора, вы можете обойти это. Моей первой попыткой было превратить .logo a в display:block; затем определите ширину, высоту и цвет фона и используйте margin:0 auto; Я только что обновил codepen - person bingo; 19.10.2015

arrow_upward
0
arrow_downward

Самый простой способ — сделать логотип частью меню следующим образом:

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

person Paulie_D    schedule 19.10.2015
comment
Спасибо, но мне нужно, чтобы h1 был более гибким, не нарушая структуру навбара. Например, я хочу уменьшить его всего на 10 пикселей, чтобы он был наполовину за пределами навигации, и добавить к нему несколько анимаций css3. - person TaoJS; 19.10.2015
comment
Вам, вероятно, придется позиционировать его абсолютно, но, вероятно, он не будет ужасно отзывчивым, так как вам придется жестко закодировать некоторые поля. - person Paulie_D; 19.10.2015