Центрирование My Navbar Ссылки

Итак, я отчаянно тестировал каждый метод, который я могу найти в Интернете, чтобы центрировать мои ссылки на навигационные бары.Центрирование My Navbar Ссылки

Однако, что бы я ни делал, они кажутся либо горизонтальными (как я хочу), но и слева от страницы (не то, что я хочу), либо они строятся вертикально (не то, что я хочу), а в центр страницы (что я хочу).

Кажется, что независимо от того, какой марж, поплавок, настройки отображения я использую в CSS, он никогда не отображает навигационные ссылки в горизонтальной линии, в центре страницы.

Мой код:

HTML:

<body> 
    <div class="maincontent"> 
     <div class="navbar"> 
      <div> 
       <h1>Tom Love</h1> 

       <ul> 
        <li> <a href="about.html">Home</a> </li> 
        <li> <a href="about.html">About</a> </li> 
        <li> <a href="about.html">Portfolio</a> </li> 
        <li> <a href="about.html">Contact</a> </li> 
       </ul> 
      </div> 
     </div> 

    </div> 

</body>

CSS:

h1 {font-family:'Roboto Slab',sans-serif; 
    font-size:250%; 
    font-weight:300; 
    color:black; 
    text-align:center; 
    line-height:32px; 

} 

h1 span {font-size:60%; 
    font-family:'Roboto Slab',sans-serif; 
} 

.navbar { 
clear:both; 
margin:0 auto; 
overflow:hidden; 
padding:0; 
text-align:center; 
width:100%; 
} 

.navbar div { 
    float:center; 
    position:relative; 
} 

.navbar ul { 
    list-style-type: none; 
    text-align:center; 
    padding:10px; 
    margin:auto; 
} 

.navbar ul li { 
    padding:10px; 
    float:center; 
} 

.navbar ul li a { 
    text-decoration:none; 
    color:black; 
    margin:10px; 
    display:inline; 
    width:80px; 
    height:30px; 
} 

.navbar ul li a:hover { 
    text-decoration:none; 
    color:white; 
    background:black; 
}

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

Заранее спасибо :)

источник

2014-08-20 YoungForch

Удалить float:center (не существует)
Добавить display: inline или display: inline-block - .navbar ul li
Если вы хотите, чтобы все было по центру, тогда разместите margin: 0 auto; на .maincontent и придайте ему ширину.

Различия между отображаемыми значениями: listed here on the MDN.

Стоит рассмотреть вопрос о CSS Reset или Normalise. (У некоторых исследований по двум вариантам)

Have an example!

CSS

.maincontent { 
    margin: 0 auto; 
    width: 800px; 
} 

h1 {font-family:'Roboto Slab',sans-serif; 
    font-size:250%; 
    font-weight:300; 
    color:black; 
    text-align:center; 
    line-height:32px; 

} 
.navbar ul { 
    list-style-type: none; 
    text-align:center; 
    padding:10px; 
} 

.navbar ul li { 
    padding:10px; 
    display: inline; 
} 

.navbar ul li a { 
    text-decoration:none; 
    color:black; 
    margin:10px; 
} 

.navbar ul li a:hover { 
    text-decoration:none; 
    color:white; 
    background:black; 
}

источник

2014-08-20 13:30:41 misterManSam

Не могу вас поблагодарить! Пробовал ваш код, и он работал мгновенно :) – YoungForch

Нет проблем :) Я обновил свой пример, чтобы удалить ненужный CSS и добавил объяснение по центрированию всего вашего контента. – misterManSam

Просто добавьте

display: inline;

к вашему .navbar уль Li

источник

2014-08-20 13:25:31 rblarsen

Вот что нужно делать. – Bokdem

Центрирование My Navbar Ссылки

ответ

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