Question

搜索高低，每种情况对我都不起作用。如何在每个列表项中垂直居中显示文本？我需要保持覆盖背景图像的链接（可点击区域）。

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

Answer 1

使用：

-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

Answer 2

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

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

Answer 3

这是我提出的，我没有验证或任何东西，但这确实保持文本中心完全像我需要。再次感谢您以前的帮助，非常感谢！

相同的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;
}

垂直居中但嵌套在锚和跨度中的另一种情况

3 个答案: