Не могу отцентрировать мою навигационную панель с полем auto

0

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

Вот мой CSS и HTML для навигационной части моей страницы. То, что я хочу сделать, всегда имеет ориентир nav, независимо от того, находится ли устройство в альбомной или портретной ориентации. Прямо сейчас он остается налево. Любые советы будут очень признательны.

#navwrapper{
width:100%; 
}

#navdiv{
width: 290px;
margin: 0 auto;
padding:0;
clear:both;
}

/*navigation boxes*/
#home{
height:32px;
width:55px;
background-color:#1d5a61;
padding: 18px 0 0 0;
margin: 0 5px;;
float:left;
}


#products{
height: 43px;
width: 75px;
background-color:#789949;
padding: 7px 0 0 0;
margin: 0 5px;
float: left;
}


#know{
height: 38px;
width: 60px;
background-color:#1d5a61;   
padding:12px 0 0 0;
margin: 0 5px;
float: left;
}


#contact{
height: 38px;
width: 55px;
background-color:#789949;
padding:12px 0 0 0;
margin: 0 5px;
float:left;
}

<div id="navwrapper">
<div id="navdiv">
<div id="home">
<h3><a href="index.html">Home</a></h3>
</div>
<div id="products">
<h3><a href="products.html">Products<br />
&amp;<br />
Services</a></h3>
 </div>
<div id="know">
<h3><a href="did_you_know.html">Did You Know?</a></h3>
</div>
<div id="contact">
<h3><a href="contact.html">Contact<br />
Us</a></h3>
</div>
</div>
</div>
  • 1
    Это выглядит по центру для меня. jsfiddle.net/6v2HX
Теги:
margin

3 ответа

0

Маржа: 0 auto иногда не работает для нескольких доктрий. Вы можете проверить или изменить doctype, чтобы исключить эту проблему и попробовать.

Поделиться
  • 0
    Пробовал, ничего не меняет. Спасибо за предложение.
0

Я считаю, что при центрировании элемента, который имеет дочерние элементы, плавающие, это не сработает. Я рекомендую заменить float: слева на каждом элементе navdiv отображать: встроенный блок

#navwrapper{
width:100%; 
}

#navdiv{
width: 290px;
margin: 0 auto;
padding:0;
clear:both;
}

/*navigation boxes*/
#home{
height:32px;
width:55px;
background-color:#1d5a61;
padding: 18px 0 0 0;
margin: 0 5px;;
**display: inline-block;**
}


#products{
height: 43px;
width: 75px;
background-color:#789949;
padding: 7px 0 0 0;
margin: 0 5px;
**display: inline-block;**
}


#know{
height: 38px;
width: 60px;
background-color:#1d5a61;   
padding:12px 0 0 0;
margin: 0 5px;
**display: inline-block;**
}


#contact{
height: 38px;
width: 55px;
background-color:#789949;
padding:12px 0 0 0;
margin: 0 5px;
**display: inline-block;**
}
Поделиться
  • 0
    Спасибо за предложение, но это не сработало для меня. Поля div были неровными. Не уверен почему. Также не сделал это центром для меня.
0

Я ввел ваш код в пустой проект, и ваш навигатор кажется центрированным. Вот скриншот.

Может быть, проблема в другом месте. Можете ли вы предоставить ссылку на весь файл? :)

Поделиться
  • 0
    Что, если я только что опубликовал остальную часть моего CSS? У меня еще нет онлайн. Я ценю, что вы посмотрите на это :)
  • 0
    Да, пожалуйста. Попробуйте опубликовать это здесь: jsfiddle.net
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню