Как разместить свою навигационную панель?

Я только что начал свой первый сайт практики, и я наклоняю, похоже, позиционирую панель навигации, где я ее хочу. Я хочу, чтобы он был сосредоточен в заголовке прямо над средним. Я смотрю на W3, но я все еще не могу понять его. Любая помощь будет принята с благодарностью. HTML:Как разместить свою навигационную панель?

<!DOCTYPE HTML> 
    <html> 

    <head> 
    <link type="css/text" rel="stylesheet" href="animate.css"> 
    <title> 

    </title> 
    </head> 

    <body> 
    <div class="Header"> 
     <div id="navbar"> 
      <ul> 
      <li>Home</li> 
      <li>About Us</li> 
      <li>Contact Us</li> 
      </ul> 
     </div> 
    </div> 
    <div class="MidBody"> 
     <div id="leftbody"></div> 
     <div id="rightbody"></div> 
     <div id="lowerbody"></div> 
    </div> 
    <div class="footer"></div> 

    </body> 

    </html>

CSS:

.Header { 
    width: calc(100%-16px); 
    height: 100px; 
    border-radius: 5px; 
    background-color: transparent; 
} 
.MidBody { 
    background-color: #141414; 
    width: calc(100%-16px); 
    height: 850px; 
    margin-top: 3px; 
    border-radius: 5px; 
    position: relative; 
} 
.footer { 
    background-color: #CCCCCC; 
    width: calc(100%-16px); 
    height: 50px; 
    margin-top: 5px; 
    border-radius: 5px; 
} 
#leftbody { 
    background-color: #F1F1F1; 
    width: 49%; 
    height: 425px; 
    left: 0; 
    margin-top: 3px; 
    margin-left: 3px; 
    position: absolute; 
    z-index: 1; 
    border-radius: 5px; 
    opacity: .25; 
    } 
    #rightbody { 
    background-color: #F1F1F1; 
    width: 49%; 
    height: 425px; 
    right: 0; 
    margin-top: 3px; 
    margin-right: 3px; 
    position: absolute; 
    z-index: 1; 
    border-radius: 5px; 
    opacity: .25; 
    } 
    #lowerbody { 
    width: 99%; 
    height: 49%; 
    right: 0; 
    left: 0; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 432px; 
    margin-bottom: 2px; 
    border-radius: 5px; 
    background-color: #F5F5F5; 
    position: absolute; 
    } 

    body { 
    background-image: url("http://www.freewebheaders.com/wordpress/wp-   content/gallery/love-emotions/i-love-you-nice-quotes-website-header.jpg"); 
    background-repeat: repeat; 
    background-attachment: fixed; 
    } 

    li { 
    display:inline; 
    top: -35px; 
    } 

    #navbar { 
    color: #F8F8F2; 
    font-family: Arial Black; 
    margin: auto; 

    }

источник

2016-03-12 Derek Edwards

по центру по горизонтали, вертикали или оба? –

Я посмотрел на ваш код, и похоже, что он работает. Пожалуйста, уточните, что не так с тем, что у вас есть. –

Горизонтально то, что я ищу. –

Вот Демо, что центрирует Navbar как по горизонтали, так и по вертикали. text-align: center используется для выравнивания по горизонтали, а line-height: 100px используется для центрирования по вертикали.

Если вы хотите, чтобы он был центрирован только на одной оси или другой, удалите одно из этих двух объявлений.

.Header { 
 
    width: calc(100%-16px); 
 
    height: 100px; 
 
    border-radius: 5px; 
 
    background-color: red; 
 
} 
 

 
.MidBody { 
 
    background-color: #141414; 
 
    width: calc(100%-16px); 
 
    height: 850px; 
 
    margin-top: 3px; 
 
    border-radius: 5px; 
 
    position: relative; 
 
} 
 

 
.footer { 
 
    background-color: #CCCCCC; 
 
    width: calc(100%-16px); 
 
    height: 50px; 
 
    margin-top: 5px; 
 
    border-radius: 5px; 
 
} 
 

 
#leftbody { 
 
    background-color: #F1F1F1; 
 
    width: 49%; 
 
    height: 425px; 
 
    left: 0; 
 
    margin-top: 3px; 
 
    margin-left: 3px; 
 
    position: absolute; 
 
    z-index: 1; 
 
    border-radius: 5px; 
 
    opacity: .25; 
 
} 
 

 
#rightbody { 
 
    background-color: #F1F1F1; 
 
    width: 49%; 
 
    height: 425px; 
 
    right: 0; 
 
    margin-top: 3px; 
 
    margin-right: 3px; 
 
    position: absolute; 
 
    z-index: 1; 
 
    border-radius: 5px; 
 
    opacity: .25; 
 
} 
 

 
#lowerbody { 
 
    width: 99%; 
 
    height: 49%; 
 
    right: 0; 
 
    left: 0; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-top: 432px; 
 
    margin-bottom: 2px; 
 
    border-radius: 5px; 
 
    background-color: #F5F5F5; 
 
    position: absolute; 
 
} 
 

 
body { 
 
    background-image: url("http://www.freewebheaders.com/wordpress/wp-content/gallery/love-emotions/i-love-you-nice-quotes-website-header.jpg"); 
 
    background-repeat: repeat; 
 
    background-attachment: fixed; 
 
} 
 

 
ul { 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
li { 
 
    display: inline; 
 
    top: -35px; 
 
} 
 

 
#navbar { 
 
    color: #F8F8F2; 
 
    font-family: Arial Black; 
 
    margin: auto; 
 
    text-align: center; 
 
    line-height: 100px; 
 
}

<div class="Header"> 
 
    <div id="navbar"> 
 
    <ul> 
 
     <li>Home</li> 
 
     <li>About Us</li> 
 
     <li>Contact Us</li> 
 
    </ul> 
 
    </div> 
 
</div> 
 
<div class="MidBody"> 
 
    <div id="leftbody"></div> 
 
    <div id="rightbody"></div> 
 
    <div id="lowerbody"></div> 
 
</div> 
 
<div class="footer"></div>

источник

2016-03-12 19:36:47

Так лини-высота толкает вниз сверху? –

@DerekEdwards В этом случае он имеет такой эффект. См. [Этот ответ] (http://stackoverflow.com/a/8865463/2234742) для более универсальных способов вертикального выравнивания содержимого и статьи [MDN на строке высот] (https://developer.mozilla.org/en-US/docs/Web/CSS/line-height), чтобы прочитать, что делает этот эффект «line-height». –

Хорошо, я обязательно проверю это. –

Как разместить свою навигационную панель?

ответ

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