在我的導航欄中居中標記

因此，我一直在使用HTML和CSS導航欄時遇到了一個非常簡單的問題。我試圖在我的導航欄中放置一個標記+標誌+，但無論我做什麼，我都無法在不添加行高的情況下實現它：x像素;到每一個單獨的標籤，但即使如此，有些不按預期工作。我試過使用文本對齊：中心;在我的#menu，但它似乎並沒有工作？很抱歉，如果這是一個愚蠢的問題，但我只是不明白它..在我的導航欄中居中標記

HTML：

<!DOCTYPE html> 

<head> 
    <meta charset="UTF-8"> 

    <link rel="stylesheet" href="main.css" type=text/css> 
    <script> 

     function startTime() { 
      var today = new Date(); 
      var h = today.getHours(); 
      var m = today.getMinutes(); 
      var s = today.getSeconds(); 

      m = checkTime(m); 
      s = checkTime(s); 

      document.getElementById('clock').innerHTML = h + ":" + m + ":" + s; 
      var t = setTimeout(startTime, 500); 
     } 
     function checkTime(i) { 
      if(i < 10) {i = "0" + i}; 
      return i; 
     } 

    </script> 
</head> 
<body onload="startTime()"> 
<nav id="menu"> 
<ul> 
    <img src="axelhalldin.png"> 
    <li><a href="index.php" class="active">Hem</a></li> 
    <li><a href="game.html">Projekt</a></li>  
    <li><a href="about.html">Om mig</a></li> 
    <li><div id="clock"></div></li> 
</ul> 
    </nav> 

    <div id="welcome"><center><h2>Välkommen!</h2> <p>Den här sidan är skapad för att visa upp mina projekt inom webbprogrammering, och även lite om mig själv. Använd menyn ovan för att ta dig runt i webbsidan. </p></center></div> 


    </div> 
</body>

CSS：

body { 
    padding:0; 
    float:none; 
    margin:0; 
} 
#menu { 
    width:100%; 
    height:6.5em; 
    background-color:#00334d; 
} 
footer { 
    padding:0; 
    width:100%; 
    height:3em; 
    background-color:#00334d; 
    text-align:center; 

} 
#footerparagraph{ 
    font-family:sans-serif; 
    font-style:italic; 
    color:lightgrey; 
    font-size:0.75em; 
    margin:0 -85em 0 0; 
} 
#myCanvas { 
    border-style:solid; 
    margin:5em 22em; 
    box-shadow:0em 0em 1.25em 0.5em; 
} 
#imageAxel { 
    border-style:solid; 
    border-width:0.3em; 
    border-radius:0.01em; 
    border-color:white; 
    box-shadow:; 
    margin-top:3.75em; 
    margin-left:-2.6em; 
    -webkit-transform: rotate270deg); 
    -moz-transform: rotate(270deg); 
    -o-transform: rotate(270deg); 
    -ms-transform: rotate(270deg); 
    transform: rotate(270deg); 
} 
#clock { 
    float:right; 
    color:white; 
    margin:0em 2em 0em 0em; 
    font-family:sans-serif; 
    font-style:italic; 
    font-size:1.75em; 
    line-height:3.5em; 
} 
#about{ 
    width:20em; 
    height:31.25em; 
    background-color:#00334d; 
    margin: 100px 125px; 
    padding:; 
} 
#aboutText { 
    width:40em; 
    height:31.25em; 
    background-color:#00334d; 
    margin:-600px 415px; 
    padding:; 
} 
a { 
    font-size:2em; 
    font-family:sans-serif; 
    text-decoration:none; 
    color:lightgrey; 
    padding:0.25em; 
    display:inline-block; 
    margin:1em 2em 0px 2em; 
} 
a.active { 
    border-style:solid; 
    border-width:2px; 
    border-color:white; 
    color:white:; 
} 
a:hover{ 
    color:white; 
} 
h1 { 
    text-align:center; 
    font-family:sans-serif; 
} 
h2 { 
    color:white; 
    font-family:sans-serif; 
    text-align:center; 
    font-style:italic; 
} 
header { 
    background-color:#00334d; 
    color:white; 
} 
li { 
display:inline; 
} 
p { 
    color:white; 
    padding:15px; 
    font-family:sans-serif; 
    margin:1.5em 0em; 
} 
ul { 
text-decoration:none; 
display:inline; 
} 
#welcome{ 
    background-color:#00334d; 
    font-family:Verdana; 
    width:400px; 
    height:auto; 
    margin: 100px auto; 
    padding:30px; 
} 
#pAbout{ 
    max-width:200px; 

}

來源

2016-08-18 axul

感謝您的問題@axul！這是你能提供的最簡單的例子嗎？最簡單的例子將幫助人們更快地幫助你... – Cyrus

財產以後這樣的：

#menu img { 
    /*--- css for img in menu ---*/ 
} 

#menu li{ 
    float:left; /*--- Make the list go horizontal ---*/ 
    margin:0; 
}

來源

2016-08-19 00:04:24

水平和垂直居中是分開的問題。將＃text-align: center添加到#menu選擇器中是將事物水平居中的絕佳方法，並且在我嘗試使用時對它起作用。（至少據我所知，沒有JSBin加載你的徽標圖像。）

你的垂直居中關閉的原因是默認填充適用於你的ul中的一些元素。你可以用下面的方法解決這個問題。

ul *{ 
    padding-top: 0; 
}

您可以考慮使用一個CSS復位，使所有元素0的邊距和補，直到你故意設置它們，否則，爲了關閉主動頭這樣的事情。

下面是鏈接到我的JSBin的變化。 http://jsbin.com/sukogopixa/edit?html,css,output

來源

2016-08-19 00:07:25 DLH

在我的導航欄中居中標記

回答

相關問題