Проблемы с навигацией и центрированием изображений

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

JS Fiddle: https://jsfiddle.net/3k65c20u/

Вот мой код:

#header { 
 
    height: 200px; 
 
    width: 100%; 
 
    background-color: black; 
 
} 
 
#top-bar { 
 
    background-repeat: repeat-x; 
 
    position: absolute; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 200px; 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 
//Top Navigation Bar// 
 
.navigation-bar { 
 
    background-color: black; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 250px; 
 
} 
 
img.center { 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
.navigation-bar ul { 
 
    padding: 210px; 
 
    margin: 0px; 
 
    text-align: center; 
 
} 
 
.navigation-bar li { 
 
    list-style-type: none; 
 
    padding: 8px; 
 
    height: 24px; 
 
    margin-top: 30px; 
 
    margin-bottom: 4px; 
 
    display: inline; 
 
} 
 
.navigation-bar li a { 
 
    color: gray; 
 
    background-color: black; 
 
    font-size: 13px; 
 
    text-transform: uppercase; 
 
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
 
    text-decoration: none; 
 
    box-shadow: 0px; 
 
    border-radius: 3px; 
 
    padding-right: 1em; 
 
    padding-left: 1em; 
 
    line-height: 2em; 
 
    margin-right: 16px; 
 
} 
 
.navigation-bar li:first-child { 
 
    margin-left: 20px; 
 
    border: #C00; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="feistybite.css"> 
 
    <div id="header"> 
 

 

 
    <div id="top-bar"></div> 
 

 

 

 

 

 
    <div class="navigation-bar"> 
 
     <img src="strikerlogo.png" class="center"> 
 

 

 
     <div id="navigation-container" class="cf"> 
 
     <ul> 
 
      <li><a href="#">Miten se toimii</a> 
 
      </li> 
 
      <li><a href="#">Osta</a> 
 
      </li> 
 
      <li><a href="#">Tarina</a> 
 
      </li> 
 
      <li><a href="#">Meistä</a> 
 
      </li> 
 
      <li><a href="#">Uutisia</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 

 
    </div> 
 
</head> 
 

 
<body> 
 
</body> 
 

 
</html>

источник

2017-02-15 ECheibaa

не уверен, что дизайн вы хотите достичь, но я просто изменил положение панели навигации по относительным, и изображение до абсолютного значения, поэтому ... установите значение слева на 50% и используя свойство CSS transform: translateX(-50%);, изображение, наконец, центрировано

https://jsfiddle.net/3k65c20u/1/

источник

2017-02-15 13:38:16

Снимите padding: 210px в .navigation-bar ul правила!

источник

2017-02-15 13:40:12 Anfuca

Это прекрасно работает, спасибо! – ECheibaa

изменения CSS в ul к, удаление padding:210px;

.navigation-bar ul { 
    margin: 0px; 
    text-align:center; 
}

источник

2017-02-15 13:50:40

Проблемы с навигацией и центрированием изображений

ответ

Смежные вопросы