내 탐색 막대의 태그 가운데 맞추기

HTML과 CSS가있는 탐색 모음과 관련하여 아주 간단한 문제가있었습니다. 내 태그 + 로고 + 내 탐색 표시 줄 내부에 노력하고있어,하지만 내가 뭘 어쨌든 난 그냥 선 높이를 추가하지 않고도 일어날 수 있도록 할 것 : x 픽셀; 모든 별도의 태그에,하지만 그럼에도 일부는 의도대로 작동하지 않습니다. text-align : center;를 사용하여 시도했습니다. 내 # 메뉴에서하지만 그냥 작동하지 않는 것 같아? 이 바보 같은 질문이지만 난 그냥 그것을보고 해달라고하면 죄송합니다 ..내 탐색 막대의 태그 가운데 맞추기

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

수평 및 수직선 알 센터링은 별도의 문제입니다. #menu selector에 text-align: center을 추가하는 것은 완전히 물건을 수평으로 배치하는 좋은 방법이며 시도해 보니 저에게 효과적이었습니다. (적어도 당신의 로고 이미지를로드하는 JSBin없이 말할 수있는 한).

세로 가운데 맞춤을 해제 한 이유는 ul의 일부 요소에 적용된 기본 패딩이었습니다. 다음과 같이 수정할 수 있습니다.

ul *{ 
    padding-top: 0; 
}

당신은 당신이 의도적으로 꺼 사전에 이런 종류의 머리하기 위해, 그렇지 않으면 그들을 설정까지 모든 요소 0의 마진과 패딩을 만들기 위해 CSS 리셋을 사용하는 것이 좋습니다.

다음은 내 JSBin에 대한 링크입니다. http://jsbin.com/sukogopixa/edit?html,css,output

출처

2016-08-19 00:07:25 DLH

내 탐색 막대의 태그 가운데 맞추기

답변

관련 문제