2016-08-18 13 views
0

HTMLとCSSのナビゲーションバーについてはかなり簡単な問題がありました。私のタグを中心にしようとしています+ロゴ+私のナビゲーションバー内には、私が何をしても私はちょうどそれが行の高さを追加せずに起こるように見える:xピクセル;すべての別々のタグには、しかし、その後もいくつかの意図したように動作しません。私はtext-align:centerを使ってみました。私の#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; 

} 
+0

ご質問ありがとうございます@axul!これはあなたが提供できる最も単純な例ですか?最小の例は人々があなたをより速く助けるのを助けるでしょう... – Cyrus

答えて

0

このように気にいら:

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

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

水平および垂直アールセンタリングは別々の問題です。 #メニューセレクターにtext-align: centerを追加することは、物事を水平に置くのにはとても良い方法です。試してみると、私にとってはうまくいっています。 (少なくとも私はあなたのロゴイメージを読み込むJSBinなしで言うことができた限り)

垂直センタリングがオフになった理由は、ulのいくつかの要素に適用されたデフォルトの埋め込みでした。あなたはそれを次のように修正することができます。

ul *{ 
    padding-top: 0; 
} 

あなたが意図的にオフ積極的にこの種のものを頭にするためには、そうでない場合は、それらを設定するまで、すべての要素0の余白とパディングを作るためにCSSのリセットを使用して検討するかもしれません。

ここでは、JSBinへのリンクを変更しました。 http://jsbin.com/sukogopixa/edit?html,css,output

関連する問題