Центрирование панели навигации в заголовке с логотипом

Ищу небольшую помощь по проекту, я пытаюсь получить панель навигации по центру внутри заголовка с логотипом слева.

HTML

<header>
  <img src="http://s32.postimg.org/5bebu6mbl/Image_5_8_16_at_12_10_PM.jpgHome" />
  <div id="nav">
    <span><a href="#">Home</a></span>
    <span><a href="#"><button>Televeisions</button></a></span>
    <span><a href="#">Electronics</a></span>
    <span><a href="#">Services</a></span>
  </div>
</header>

CSS

header {
  height: 5.5em;
  background: gray;
  color: Black;
  text-align: justify;
}

#nav {
  width: 100%;
  text-align: center;
}

#nav span a {
  color: black;
  text-decoration: none;
  padding: 10px;
}

JSFiddle


html css header nav
person EJJ    schedule 10.05.2016    source источник
comment
Не могли бы вы добавить свой HTML к вашему вопросу?   -  person zgood    schedule 10.05.2016
comment
Извините, возникли проблемы jsfiddle.net/xjL3j8nr   -  person EJJ    schedule 10.05.2016
comment
Если один из ответов завершил ваш вопрос, отметьте его, нажав зеленую галочку.   -  person Tony Tambe    schedule 13.05.2016

Ответы (2)


arrow_upward
0
arrow_downward

Ваша ширина навигации 100% заставляет навигацию находиться под изображением. Я добавил overflow: hidden в заголовок, переместил img влево и поместил margin-top в #nav.

Настройте свой CSS примерно так:

header {
  height: 5.5em;
  background: gray;
  color: Black;
  text-align: justify;
  overflow: hidden;
}
img {
  float: left;
}
#nav {
  width: 600px;
  text-align: center;
  margin-top: 2.5em;
}

#nav span a {
  color: black;
  text-decoration: none;
  padding: 10px;
}

Вы можете настроить поля и т. д., чтобы стилизовать, как вы хотите.

Codepen: http://codepen.io/Tambe257/pen/XdGdLZ

person Tony Tambe    schedule 10.05.2016

arrow_upward
0
arrow_downward

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

header {
  height: 5.5em;
  background: gray;
  color: Black;
  text-align: justify;
  position:relative;
}

#nav {
  width: 100%;
  text-align: center;
 top:2em;
 position:absolute;
}

#nav span a {
  color: black;
  text-decoration: none;
  padding: 10px;

}
person Dennis Hansinger    schedule 10.05.2016