html - 无法让 HTML 文本在响应式布局的 div 内部居中

Question

遇到了一个问题，我试图让文本在图像顶部的 div 中间居中。在桌面上看起来不错，但一旦我开始尝试让它移动，它就搞砸了。我认为这是因为我在 div 中使用了固定高度，但我尝试了 height:auto;所做的只是将文本放置在顶部对齐，因为它不知道 div 的实际高度是多少。有人知道更好的解决方案吗？

首先，这里是有问题的站点:http://originalchuck.com/它在页面的中间。三张大图。

现在，这是我目前正在使用的 CSS:

span.text-content, div.homepage-bags span.text-content-bags { color: #fff; display: table; font-size: 30px; left: 0px; position: absolute; top: 0px; text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.5), 0px 1px 3px rgba(255, 255, 255, 0.5); text-transform: uppercase; width: 100%; }

div.homepage-featured span.text-content { height: 620px!important; }

div.homepage-buckets span.text-content { height: 288px!important; }

div.homepage-bags span.text-content-bags { height: 288px!important; }

div.homepage-featured span.text-content span, div.homepage-bags span.text-content-bags span { display: table-cell; text-align: center; vertical-align: middle; }

Answer 1

不要对每个 span.text-content 使用 height !important。它应该与 height: 100%; 一起正常工作。同时从 span.text-content 中删除 display: table;，我们将绝对居中内部跨度。对于内部跨度:

span.text-content span {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    margin-top: -12px;
    text-align: center;
}

悬停层中的文本很短，因此我们可以预期它永远不会换行。这意味着使用 top:50% 和 matgin-top 减去文本高度的一半可以垂直居中。

此外，您最好在此处为标签 a 设置 display: inline-block，因为移动设备上第一张图片的叠加宽度存在问题。