Question

我创建了一个带有堆叠文字https://en.wikipedia.org/wiki/ASCII

的固定垂直菜单

我的每个部分都是100％的高度。我不确定这是否是正确的做事方式，但我基本上使用span元素并将它们设置为display: block;

<a class="page-scroll" href="#header">
    <span> H </span>
    <span> O </span>
    <span> M </span>
    <span> E </span>
</a>

现在我有什么工作，但看到我处理每个部分的100％高度，我试图将菜单垂直对齐放在容器的中间。我已尝试在ul上使用此属性，但它不会将整个菜单移到中间。

我在考虑使用50％的保证金，但如果我在菜单中添加更多项目，则可能无效。此外，如果我确实在菜单中添加了更多项目，是否有办法确保整个菜单显示在视口中，因此不会重叠到另一个部分？我更新了JSFiddle以证明我的意思。因为我在菜单中添加了另外几个菜单项，所以test2似乎消失了，因为它不适合视口。有没有办法可以避免这种情况？

任何建议表示赞赏。

由于

Answer 1

从height: 100%

.nav.navbar-nav

在position: absolute; top: 50%; transform: translateY(-50%)

.nav.navbar-nav

（可选）添加基于高度的媒体查询以处理菜单在屏幕上的显示，这些显示在垂直显示时不足以适合菜单选项。

HTML（未更改）：

<div class="navbar navbar-fixed-left">
    <ul class="nav navbar-nav">
        <li>
            <a class="page-scroll" href="#header">
                <span> H </span>
                <span> O </span>
                <span> M </span>
                <span> E </span>
            </a>
        </li>
        <li>
            <a class="page-scroll" href="#about">
                <span> A </span>
                <span> B </span>
                <span> O </span>
                <span> U </span>
                <span> T </span>
            </a>
        </li>
        <li>
            <a class="page-scroll" href="#contact">
                <span> C </span>
                <span> O </span>
                <span> N </span>
                <span> T </span>
                <span> A </span>
                <span> C </span>
                <span> T </span>
            </a>
        </li>
    </ul>
</div>

<header id="header">
  <div class="header-content">
    <div class="header-content-inner">
      <h1 id="homeHeading">
        Some Title
      </h1>
    </div>
  </div>
</header>

<section class="bg-primary" id="about"></section>

CSS：

html, body {
    height: 100%;
    width: 100%;
}

header {
    background: green;
    color: white;
    text-align: center;
    min-height: 100vh;
}

header .header-content {
    padding: 0 50px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}

header .header-content .header-content-inner {
    margin-left: auto;
    margin-right: auto;
    max-width: 1000px;
}

header .header-content .header-content-inner h1 {
    color: #ffffff;
    font-size: 33px;
    font-weight: 100;
    letter-spacing: 2px;
    line-height: 46px;
    width: 100%;
}

.navbar-fixed-left {
    border-radius: 0;
    height: 100%;
    position: fixed;
    width: 140px;
    z-index: 99999;
}

.navbar-fixed-left .navbar-nav > li {
    float: none;
    width: 139px;
}

.navbar-nav > li > a > span {
    display: inline-block;
    font-size: 1.2em;
    padding-bottom: 0;
    padding-top: 0;
    text-align: center;
    color: #ffffff;
}

#about {
    background: blue;
    height: 100%;
    min-height: 100%;
}

.nav.navbar-nav {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media (min-height: 450px){
  .navbar-nav > li > a > span {
    display: block;
  }
}

演示：https://jsfiddle.net/x23yg9ot/5/

您显然希望调整媒体查询中的高度条件以满足您的需求。

此调整可以使用JavaScript自动完成，如下所示：https://jsfiddle.net/x23yg9ot/8/

Answer 2

请使用 flex

尝试以下代码

<style>
.page-scroll{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

<a class="page-scroll" href="#">
    <span> H </span>
    <span> O </span>
    <span> M </span>
    <span> E </span>
</a>

Answer 3

使用flexbox。您只需为.navbar元素添加100％的高度，并为.navbar-nav添加以下设置：

.navbar-nav {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
}

https://jsfiddle.net/n4p9hknu/2/

如果页面上的菜单列表项多于适合，flex: wrap将导致它们换行到第二列：https://jsfiddle.net/rubgowpa/1/

垂直菜单与堆积的文本

3 个答案: