0

到处搜索，外面的每一种情况都不适合我。如何在每个列表项中垂直居中文本？我确实需要保留覆盖背景图像的链接（可点击区域）。

HTML

<section>
  <ul>
  <li><a id="monday" href="_monday.html"><span>Monday</span></a></li>
  <li><a id="tuesday" href="_tuesday.html"><span>Tuesday</span></a></li>
  <li><a id="wednesday" href="_wednesday.html"><span>Wednesday</span></a></li>
  <li><a id="thursday" href="_thursday.html"><span>Thursday</span></a></li>
  <li><a id="friday" href="_friday.html"><span>Friday</span></a></li>
  <li><a id="saturday" href="_saturday.html"><span>Saturday</span></a></li>
  <li><a id="sunday" href="_sunday.html"><span>Sunday</span></a></li>
  <li><a id="printAll" href="_week.html"><span>Print All Specials</span></a></li>
</ul>

CSS（它的一些版本——我还在学习很多东西：）

    section {
    max-width:86.029411764%;
    margin: -6px auto auto auto;
    overflow: hidden;
    }   

    section ul {
    display: inline-block;
    width: 35%;
    height: 100%;
    min-width: 320px;
    margin-left: 1rem;
    margin-right: 1rem;
    }

    section li {
    position: relative;
    display: block;
    background: url(_images/daybg_06.png) center center no-repeat;
    background-size: contain;
    padding-top: 14.95%;
    margin: 20px auto 20px auto;
    }

    section ul li a {
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    font-size: 1.3rem;
    color: white;
    text-decoration: none;
    text-align: center;
    }

    section ul li a span {


    }

这是更新的链接 - http://jsbin.com/ExEHAL/1/edit?html,css,output

4

3 回答 3

0

采用 ：

-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
于 2013-09-10T07:51:02.703 回答
0

我个人不喜欢我自己的答案））但我发现它在当前情况下是最好的。

section ul li a span {
    position: relative;
    top: 12px;
}

编辑：

section ul li a span {
    display: block;
    width: 100%;
    position: absolute;
    text-align: center;
    left: 0;
    top: 50%;
    margin-top: -10px;
}

第一个例子没有居中。第二个例子更接近于我们所需要的。唯一需要注意的margin-top: -10px是元素的高度 / 2

于 2013-09-10T09:14:54.527 回答
0

这就是我想出的，我没有验证或任何东西，但这确实让文本完全像我需要的那样居中。再次感谢之前的帮助，非常感谢！

相同的 HTML

CSS

section {
position: relative;
width: 86.029411764%;
height: 100%;
margin: -6px auto 0 auto;
overflow: hidden;
}

section ul {
list-style-type: none;
display: block;
width: 100%;
min-width: 200px;
margin: .6rem auto 1.2rem auto;
height: 100%;
font-size: 0;
}

section ul li {
position: relative;
width: 45%;
max-width: 481px;
display: inline-block;
background: url(_images/daybg.png) center center no-repeat;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    background-size: contain;
margin: auto 2.5% auto 2.5%;
list-style: none;
text-align: center;
padding-top: 9%;
}

section ul li a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
text-decoration: none;
text-align: center;

}

section ul li a span {
display: block;
position: absolute;
bottom: 0;
width: 100%;
height: 50%;
line-height: 0;
font-size: 1.1rem;
color: white;
text-align: center;
}
于 2013-09-18T17:55:34.657 回答