Question

Soooo我想知道如何保持导航固定但也垂直居中。如果有任何改进代码的建议让我知道plz：）

<nav>


<span style="color:#B80003; font-size:24px; text-decoration:underline;">Home</span>
<br>
 <a href="music.html">Music</a>
<br>
<a href="pics.html">Pics</a>
<br>
<a href="tour.html">Tour</a>

</nav>


nav {
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-variant:small-caps;
    font-size:18px;
    position: fixed;
    top: 0;
   left: 0;
 z-index: 9999;
}

Answer 1

使用此top: 0;left: 0;right:0;bottom:0;margin:auto;

＆＃13;

nav {
  font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  font-variant:small-caps;
  font-size:18px;
  height:20px;
  position: fixed;
  top: 0;
  left: 0;
  right:0;
  bottom:0;
  z-index: 9999;
  margin:auto;
}

＆＃13;

<nav>
  <a href="#" style="color:#B80003; font-size:24px;">Home</a>
  <a href="music.html">Music</a>
  <a href="pics.html">Pics</a>
  <a href="tour.html">Tour</a>
</nav>

＆＃13;

编辑2 好的，这总是用来工作我没有看到你正在使用<a>元素，只是包装需要占用高度;所有设置检查片段

Answer 2

＆＃13;

nav {
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-variant:small-caps;
font-size:18px;
position: fixed;
/* top: 0; */
   left: 0;
 z-index: 9999;
top: 50%;
transform: translateY(-50%);
}

＆＃13;

<nav>


<span style="color:#B80003; font-size:24px; text-decoration:underline;">Home</span>
<br>
 <a href="music.html">Music</a>
<br>
<a href="pics.html">Pics</a>
<br>
<a href="tour.html">Tour</a>

</nav>

＆＃13;

Answer 3

它不是很清楚你想要做什么，但我认为就是这样。

＆＃13;

nav {
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  font-variant: small-caps;
  font-size: 18px;
  position: fixed;
  top: 50%;
  left: 0%;
  z-index: 9999;
  transform: translate(0%, -50%);
  border: 1px solid grey;
  padding: 1em;
}
a {
  display: block;
}

＆＃13;

<nav>
  <a href="#" style="color:#B80003; font-size:24px;">Home</a>
  <a href="music.html">Music</a>
  <a href="pics.html">Pics</a>
  <a href="tour.html">Tour</a>
</nav>

＆＃13;

如何使固定的垂直导航css居中？

3 个答案: