我创建了一个固定的垂直菜单堆叠文本JSFiddle垂直菜单堆叠文本
我的每个部分将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似乎消失了,因为它不适合视口。有没有办法可以避免这种情况?
任何意见赞赏。
感谢