jquery - 将 "link text"垂直对齐到 li 元素的中间(并相应地调整文本大小以适合 li 容器)

Question

哇，我希望我的标题有意义

我制作了一个完整的页面导航，包裹在一个列表中，按照它应该的方式......我说得对吗？，所以现在我有几个问题:

1 是否可以将我的链接在列表项中垂直居中？
2 当我放大或缩小视口(viewport)时，我可以制作我的文本以适合列表项吗
3 奖金问题为什么我对链接所做的更改:访问不可见

允许使用 Jquery 解决方案 ;)

我已经尝试过在网上找到的不同解决方案，但似乎都不适用于我的情况 喜欢(使用垂直对齐并在我的链接周围放置一个段落标记) 或(使用显示:表格)等。

这是我的代码，希望它有意义(不要 mock 我的新手编码风格)

问候Djlzz

您可以访问完整站点@ http://codepen.io/DJLZZ/pen/BeLHl为了理解我的编码逻辑，大声笑......并直观地看到我在做什么以及为什么 ;)

感谢所有帮助

HTML:

    <div class="nav">
    <ul id="navsound">
        <li> <a href="index.html"       >     Home   </a> </li>
        <li> <a href="music.html"       >     Music  </a> </li>
        <li> <a href="about.html"       >     About  </a> </li>
        <li> <a href="pics.html"        >      Pics  </a> </li>
        <li> <a href="video.html"       >     Video  </a> </li>
        <li> <a href="guestbook.html"   > Guestbook  </a> </li>
        <li> <a href="agenda.html"      >    Agenda  </a> </li>
        <li> <a href="store.html"       >     Store  </a> </li>
        <li> <a href="contact.html"     >   Contact  </a> </li>
        <li> <a href="links.html"       >     Links  </a> </li>
    </ul>        

CSS

.nav  {     z-index:10;
    display:block;
    position:absolute;
    height:75%;
    width:90%;
    margin-top:0.5%;
    margin-left:5%;
    margin-right:5%;
    margin-bottom:2%;
    }

.nav ul { display:block;
    height:100%;
     list-style-type:none;
    }

.nav li { display:inline-block;
    height:9%;margin-bottom:0.5%;
    width:100%;
    float:left;
    clear:both;
    background:rgba(0, 0, 0, 0.33); 
    }

.nav a:link {
    display:inline-block;
    height:100%;
    width:100%;
    cursor:pointer;
    color:#ff9900;
    text-decoration: none;
    text-align:center;
    vertical-align: middle;
    }   

.nav a:hover{
    display:inline-block;
    background:rgba(0, 0, 0, 0.5);
    color: #ffffff;
    transform: scale(1.05,1);
    -ms-transform: scale(1.05,1); /* IE 9 */
    -webkit-transform: scale(1.05,1); /* Safari en Chrome */
    transition-property:transform;
    transition-duration:0.4s;
    }

.nav a:visited {display:inline-block;
                color: #ff9900;
                background:rgba(0, 0, 0, 0.5) }

谢谢我宝贵的“代码迷”

Answer 1

您可以使用 css 转换使它们垂直居中，我在这里整理了一个演示 http://codepen.io/the_ruther4d/pen/qDtkc