HTML＆CSS：將導航欄居中

-1

我擡頭看看其他有類似問題的人，但我似乎無法找到適合我的答案。我正在嘗試將導航欄居中，但它一直向左移動。任何幫助，將不勝感激！謝謝。HTML＆CSS：將導航欄居中

body { 
 
     background-color: rgb(222, 243, 246); 
 
     /* background-image: url("Capitola.jpg"); 
 
     background-repeat: no-repeat; 
 
     background-attachment: fixed; 
 
     background-position: center; 
 
     background-size: contain; 
 
     margin: 0; 
 
     padding: 0; 
 
     border: 0; 
 
    */ 
 
    } 
 
    div.image { 
 
     background-image: url("Capitola.jpg"); 
 
     background-repeat: no-repeat; 
 
     background-attachment: fixed; 
 
     background-position: center; 
 
     background-size: 100% 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
     border: 10 solid #021a40; 
 
     position: absolute; 
 
     height: 100%; 
 
     width: 100%; 
 
    } 
 
    div#wrapper { 
 
     position: fixed; 
 
     text-align: center; 
 
     z-index: 1000; 
 
     margin: 0 auto; 
 
    } 
 
    .navbar ul { 
 
     list-style-type: none; 
 
     display: inline-block; 
 
     padding: 0; 
 
     margin: 0; 
 
     overflow: hidden; 
 
     border-radius: 500px; 
 
     border: 1px solid black; 
 
    } 
 
    .navbar li { 
 
     float: left; 
 
     display: inline; 
 
     text-align: center; 
 
    } 
 
    .navbar a { 
 
     display: inline-block; 
 
     font-weight: bold; 
 
     width: 120px; 
 
     color: black; 
 
     background-color: rgb(254, 255, 241) 
 
     /*rgb(219,243,245)*/ 
 
     ; 
 
     text-align: center; 
 
     padding: 10px; 
 
     text-decoration: none; 
 
    } 
 
    .navbar a:hover { 
 
     background-color: rgb(239, 162, 180); 
 
    } 
 
    h1 { 
 
     font-family: Florence, cursive; 
 
     margin-top: 8%; 
 
     margin-left: 60%; 
 
     color: white; 
 
     font-size: 3.5em; 
 
    }

<!DOCTYPE html> 
 
<html> 
 

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

 
<body> 
 
    <div class="image"> 
 
    <h1>Michael Leath</h1> 
 
    </div> 
 
    <div id="wrapper"> 
 
    <div class="navbar"> 
 
     <ul> 
 
     <li><a href="#aboutme">About Me</a> 
 
     </li> 
 
     <li><a href="#contact">Contact</a> 
 
     </li> 
 
     <li><a href="#education">Eduation</a> 
 
     </li> 
 
     <li><a href="#background">Background</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2015-06-19 Michael Leath

[水平居中在一個div中的div]可能的副本（http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div） – apaul

您需要設置一個寬度爲#wrapper指定margin: 0 auto工作:)

body { 
 
    background-color: rgb(222, 243, 246); 
 
    /* background-image: url("Capitola.jpg"); 
 
     background-repeat: no-repeat; 
 
     background-attachment: fixed; 
 
     background-position: center; 
 
     background-size: contain; 
 
     margin: 0; 
 
     padding: 0; 
 
     border: 0; 
 
    */ 
 
} 
 
div.image { 
 
    background-image: url("Capitola.jpg"); 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    background-size: 100% 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 10 solid #021a40; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
div#wrapper { 
 
    position: fixed; 
 
    text-align: center; 
 
    z-index: 1000; 
 
    margin: 0 auto; 
 
    width: 100%; 
 
} 
 
.navbar ul { 
 
    list-style-type: none; 
 
    display: inline-block; 
 
    padding: 0; 
 
    margin: 0; 
 
    overflow: hidden; 
 
    border-radius: 500px; 
 
    border: 1px solid black; 
 
} 
 
.navbar li { 
 
    float: left; 
 
    display: inline; 
 
    text-align: center; 
 
} 
 
.navbar a { 
 
    display: inline-block; 
 
    font-weight: bold; 
 
    width: 120px; 
 
    color: black; 
 
    background-color: rgb(254, 255, 241) 
 
    /*rgb(219,243,245)*/ 
 
    ; 
 
    text-align: center; 
 
    padding: 10px; 
 
    text-decoration: none; 
 
} 
 
.navbar a:hover { 
 
    background-color: rgb(239, 162, 180); 
 
} 
 
h1 { 
 
    font-family: Florence, cursive; 
 
    margin-top: 8%; 
 
    margin-left: 60%; 
 
    color: white; 
 
    font-size: 3.5em; 
 
}

<!DOCTYPE html> 
 
<html> 
 

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

 
<body> 
 
    <div class="image"> 
 
    <h1>Michael Leath</h1> 
 
    </div> 
 
    <div id="wrapper"> 
 
    <div class="navbar"> 
 
     <ul> 
 
     <li><a href="#aboutme">About Me</a> 
 
     </li> 
 
     <li><a href="#contact">Contact</a> 
 
     </li> 
 
     <li><a href="#education">Eduation</a> 
 
     </li> 
 
     <li><a href="#background">Background</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2015-06-19 02:14:32

在CSS文件

，改變

div＃wrapper { position：fixed;

作爲

DIV＃包裝{ 位置：中心;

它然後工作。

來源

2015-06-25 20:29:47

HTML＆CSS：將導航欄居中

回答

相關問題