在完全可点击的响应列表项中将a-href元素垂直居中

Lisa 发表于 Dev

丽莎

有谁知道如何在列表项中垂直居中放置a-href元素，同时保持它们的响应速度和整个列表元素可点击？

我已经尝试了各种方法：垂直对齐，显示：table / table-cell等，在Google上搜索了很多并搜索了堆栈溢出，但是这些解决方案似乎都不起作用（或者我只是错误地实现了它们）或涵盖了所有问题（中心，可点击，响应）。由于显示div（该列表将显示照片，并且由于覆盖了它的两个菜单项，我不想丢失细节），因此列表项的高度对浏览器的高度起反应。

JSFiddle：http : //jsfiddle.net/K6V58/1/

HTML：

    <div id="wrapper">
    <nav id="menu">
        <ul>    
            <li><a href="#">test 1</a></li>
            <li><a href="#">test 2</a></li>
        </ul>
    </nav>
    <article id="display">boe</article>
    <nav id="gallery">
        <ul>
            <li><a href="#"><img src="images/gallery/klein/square.jpg" class="imageList"></a></li>
            <li><a href="#"><img src="images/gallery/klein/square.jpg" class="imageList"></a></li>
        </ul>
    </nav>
</div>

CSS：

/*---------------------------- MAIN MENU ----------------------------*/
#wrapper{
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}

nav#menu, nav#menu ul, nav#menu ul li{
    margin:0;
    padding:0;  

    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:10pt;
    color:grey;

    background-color:#000000;
}

nav#menu{
    position:absolute;
    top:0;
    width:100%;
    height:5%;
    text-align:right;
}

nav#menu ul{
    padding: 0 10px;
    height:100%;
}

nav#menu ul li{
    height:100%;
    display: inline-block;
    margin: 0 10px;
    list-style: none;
}

nav#menu ul li a{
    text-decoration:none;
    color:grey;
    height:100%;
    display: block;
}

/*---------------------------- IMAGE MENU ----------------------------*/


nav#gallery, nav#gallery ul, nav#gallery ul li, img.imageList{
    margin:0;
    padding:0;  
    background-color:#000000;
}

nav#gallery{
    position:absolute;
    bottom:0;
    width:100%;
    height:5%;
}

nav#gallery ul li{
    display: inline-block;
    list-style: none;
    height:100%;
    float:left;
}

.imageList{
    height:100%;
    vertical-align:top;
}

/*---------------------------- DISPLAY PHOTO ----------------------------*/

article#display{
    position:absolute;
    top:5%;
    width:100%;
    height:90%;
    background-image:url(../images/gallery/groot/2.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    margin:0;
    padding:0;
}

杜沙尔

你可以试试这个

我已经span在aHTML中添加了

<li><a href="#"><span>test 1</span></a></li>
<li><a href="#"><span>test 2</span></a></li>

并更新了此CSS

nav#menu ul li a{
    text-decoration:none;
    color:grey;
    height:100%;
    display: table;
}
nav#menu ul li a span {
    display: table-cell;
    vertical-align: middle
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。