Центрирование навигационной панели div

Я изучил немного html и css через среднюю школу, но у меня возникли проблемы с созданием моего сайта для моего малого бизнеса. Я создал свой дизайн навигационного бара, но я не могу сосредоточить его в своей обертке. Мой текущий код ниже.Центрирование навигационной панели div

body { 
 
    background-color: #3393FF; 
 
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; 
 
} 
 
#wrapper { 
 
    width: 1300px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    background-color: white; 
 
} 
 
#navigation: { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
#navigation li { 
 
    display: inline-block; 
 
    line-height: 40px; 
 
    height: 40px; 
 
} 
 
#navigation a { 
 
    text-decoration: none; 
 
    text-align: center; 
 
    color: #fff; 
 
    display: block; 
 
    width: 204px; 
 
    font-size: 15px; 
 
    background-color: #3393ff; 
 
} 
 
#navigation a:hover { 
 
    -moz-box-shadow: 3px 3px 4px #000; 
 
    -webkit-box-shadow: 3px 3px 3px #000; 
 
    color: #fff; 
 
}

<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" href="main.css"> 
 
    <title>Xcite Technologies</title> 
 
</head> 
 

 
<body> 
 
    <div id="wrapper"> 
 
    <br> 
 
    <div id="navigation"> 
 
     <ul> 
 
     <li><a href="index.html">Home</a> 
 
     </li> 
 
     <li><a href="aboutus.html">About Us</a> 
 
     </li> 
 
     <li><a href="services.html">Services</a> 
 
     </li> 
 
     <li><a href="pricing.html">Pricing</a> 
 
     </li> 
 
     <li><a href="contact.html">Contact Us</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <br> 
 
    <br> 
 
    </div> 
 
</body> 
 

 
</html>

Я попробовал несколько различных вещей, которые были размещены здесь, но ничего не похоже на работу. Я уверен, что это будет легко исправить и почувствовать, что я получаю туннельное видение. Благодарим вас за помощь!

источник

2016-07-03 Lindsay

Это было уже ответил http://stackoverflow.com/q/114543/5804813 –

Я попытался это решение и не было работа для меня. Но спасибо за попытку помочь :) – Lindsay

Я не вижу ширину #navigation, указанную в вашем коде. Дайте ему ширину меньше ** 100% **, так что «margin: auto;» может работать. –

Сначала удалите BR из ur html-кода, это плохая идея создать вертикальное пространство для заполнения или поля.

body { 
 
    background-color: #3393FF; 
 
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; 
 
} 
 
#wrapper { 
 
    width: 1300px; 
 
    padding: 20px 0 40px; 
 
    background-color: white; 
 
} 
 
#navigation { 
 
    text-align: center; 
 
} 
 

 
#navigation ul { 
 
display: inline-block; 
 
padding: 0; 
 
    } 
 

 
#navigation li { 
 
    display: inline-block; 
 
    line-height: 40px; 
 
    height: 40px; 
 
} 
 
#navigation a { 
 
    text-decoration: none; 
 
    text-align: center; 
 
    color: #fff; 
 
    display: block; 
 
    width: 204px; 
 
    font-size: 15px; 
 
    background-color: #3393ff; 
 
} 
 
#navigation a:hover { 
 
    -moz-box-shadow: 3px 3px 4px #000; 
 
    -webkit-box-shadow: 3px 3px 3px #000; 
 
    color: #fff; 
 
}

<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" href="main.css"> 
 
    <title>Xcite Technologies</title> 
 
</head> 
 

 
<body> 
 
    <div id="wrapper"> 
 
    <div id="navigation"> 
 
     <ul> 
 
     <li><a href="index.html">Home</a> 
 
     </li> 
 
     <li><a href="aboutus.html">About Us</a> 
 
     </li> 
 
     <li><a href="services.html">Services</a> 
 
     </li> 
 
     <li><a href="pricing.html">Pricing</a> 
 
     </li> 
 
     <li><a href="contact.html">Contact Us</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

надеюсь, что это поможет: D

источник

2016-07-03 13:25:31

Перерывы только там, пока мои логотипы и копирование записываются. Но вы установили мой навигационный бар! Огромное спасибо!! – Lindsay

Привет там вы можете использовать HTML, чтобы сделать это:

использовать <center> тег, код стал бы что-то подобное:

<body> 
    <div id="wrapper"> 
     <br> 
     <div id="navigation"> 
      <ul> 
       <center> 
        <li><a href="index.html">Home</a></li> 
        <li><a href="aboutus.html">About Us</a></li> 
        <li><a href="services.html">Services</a></li> 
        <li><a href="pricing.html">Pricing</a></li> 
        <li><a href="contact.html">Contact Us</a></li> 
       </center> 
      </ul> 
     </div> 
     <br> 
     <br> 
    </div> 
</body>

Пожалуйста, проверьте его и дайте мне теперь, если это работает :)

источник

2016-07-03 12:53:29 Nanyo

Я дал это один, и по какой-то причине он неровный. С левой стороны больше поля. Любая идея почему? – Lindsay

ну ... позвольте мне проверить вас снова css. У вас может быть некоторый «margin» или «padding», установленный на навигационную панель. – Nanyo

Центрирование навигационной панели div

ответ

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