Question

所以我对使用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;

}

Answer 1

水平和垂直居中是不同的问题。将text-align: center添加到#menu选择器是一个非常好的方法，可以横向对中，当我尝试它时，它对我有用。（至少据我所知，没有JSBin加载你的徽标图片。）

垂直居中关闭的原因是应用于ul中某些元素的默认填充。您可以使用以下方法解决此问题。

ul *{
  padding-top: 0;
}

您可以考虑使用CSS重置来使所有元素的边距和填充为0，直到您故意设置它们为止，以便主动关闭此类事件。

这是我的JSBin与更改的链接。 http://jsbin.com/sukogopixa/edit?html,css,output

Answer 2

像这样：

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

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

在我的导航栏中居中标记

2 个答案: