搜索高低,每种情况对我都不起作用。如何在每个列表项中垂直居中显示文本?我需要保持覆盖背景图像的链接(可点击区域)。
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
答案 0 :(得分:0)
使用:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
答案 1 :(得分: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
答案 2 :(得分: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;
}