Question

在我网站的第一页上，我只想让导航菜单在页面上垂直和水平居中。我尝试了一系列不同的方法，这是我最接近的方法。

我不确定如何将链接1到4水平居中，我也不肯定菜单实际上是在蓝色框中垂直居中。

（另外，这不是实际的配色方案。我添加了彩色背景以显示每个元素的边界。）

这是HTML：

<body>
<div id="centered">
<ul>
    <li><h1><a href="link1.html">LINK1</a></h1></li>
    <li><h1><a href="link2.html">LINK2</a></h1></li>
    <li><h1><a href="link3.html">LINK3</a></h1></li>
    <li><h1><a href="link4.html">LINK4</a></h1></li>
</ul>     
</div>
</body>

CSS：

html, body   { 
    background-color: black; 
    height: 100%; 
    margin: 0; 
    padding: 0;
        color: white; 
        text-align: center; }

a { 
    text-decoration: none; 
    color: #fff;
    }

h1 {
    font-size: 1.5em;
    color: #000;
    }

#centered { 
    border: solid black; 
    background-color: blue; 
    height: 20%; 
    width: 100%;
    position: absolute; 
    top: 40%; 
    }

#centered ul {
    list-style-type:none;
    margin:0;
    padding:0;
    } 

#centered li {
    float:left;
    display:inline;
    }

在这里演示：http://jsfiddle.net/chassen2/n84ey/

Answer 1

CSS更改

html, body {
    background-color: black;
    height: 100%;
    margin: 0;
    padding: 0;
    color: white;
    text-align: center;
}
a {
    text-decoration: none;
    color: #fff;
}
h1 {
    font-size: 1.5em;
    color: #000;
}
#centered {
    border: solid black;
    background-color: blue;
    height: 20%;
    width: 100%;
    position: relative;
    top: 40%;
    vertical-align:middle;
}
#centered ul {
    list-style-type:none;
    text-align:center;
    display:inline-block;
    margin-right:auto;
}
#centered li {
    float:left;
    padding: 3px 6px;
}

Answer 2

首先不要在链接中使用标题，其次是......这是 FIDDLE

<div id="centered">
  <ul>
    <li><a href="link1.html">LINK 1</a></li>
    <li><a href="link2.html">LINK 2</a></li>
    <li><a href="link3.html">LINK 3</a></li>
    <li><a href="link4.html">LINK 4</a></li>
  </ul>     
</div>


#centered { 
  border: none; 
  background: blue; 
  height: 150px; 
  width: 100%;
  text-align: center;
  position: absolute; 
  top: 50%;
  margin-top: -75px;
}

#centered ul {
  list-style: none;
  margin-top: 58px;
  padding: 0;
} 

#centered li {
  display: inline-block;
  margin: 0 20px 0 20px;
}

#centered li a { 
  text-decoration: none; 
  font-family: Verdana;
  font-size: 24px;
  color: #fff;
  transition: color 0.2s linear;
}
#centered li a:hover {
  color: #888;
}

在页面上垂直和水平居中CSS菜单

2 个答案: