Question

哇，我希望我的头衔有意义

我做了一个完整的页面导航，包裹在一个列表中，按照它的方式...我是对的吗？所以现在我有几个问题：

1是否可以在列表项中垂直居中我的链接？
2当我向上或向下缩放视口时，我可以制作文本以使其适合列表项目 3奖金问题为什么我对链接所做的更改：访问不可见

允许使用Jquery解决方案;）

我已经尝试过我在网上找到的不同解决方案，但似乎没有一个在我的情况下有用喜欢（使用vertical-align将一个段落标记放在我的链接周围）或（使用显示：表格）等。

这里是我的代码希望它有意义（不要笑我的新手编码风格）

Greetzz 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) }

谢谢我珍贵的“Code-junkies”

Answer 1

你可以使用css转换来垂直居中，我在这里放了一个演示http://codepen.io/the_ruther4d/pen/qDtkc

将“链接文本”垂直对齐到li项目的中间（并相应地调整文本大小以适应li容器）

1 个答案: