所以我遇到了一个关于使用 HTML 和 CSS 的导航栏的非常简单的问题。我试图将我的 a 标签 + Logo + 在我的导航栏中居中，但无论我做什么，我似乎都无法在不添加 line-height: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;
}
最佳答案
水平和垂直居中是不同的问题。将 text-align: center 添加到 #menu 选择器是将内容水平居中的完美方式，当我尝试时它对我有用。 (至少据我所知，没有 JSBin 加载您的 Logo 图像。)
您的垂直居中关闭的原因是默认填充应用于您的 ul 中的某些元素。您可以使用以下方法解决该问题。
ul *{
padding-top: 0;
}
您可能会考虑使用 CSS 重置将所有元素的边距和填充设置为 0，除非您故意将它们设置为其他方式，以便主动阻止此类事情发生。
这是包含更改的我的 JSBin 的链接。 http://jsbin.com/sukogopixa/edit?html,css,output
关于html - 在我的导航栏中居中标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39029172/