Question

遇到问题，我试图将文字保持在图像顶部的div中间居中。在桌面上看起来不错但是一旦我开始尝试使其移动，就会搞砸了。我认为这是因为我在div中使用了固定的高度，但我尝试了高度：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上使用此CSS：

display: block;
height: 0 !important;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
line-height: 0;
text-align: center;

将文字从span打开，这样您就可以在span.text-content

中找到您的裸照了

基本上，margin: auto会导致浏览器解析冲突的高度属性（top: 0;和bottom: 0;以及height: 0;给出的100％并使用指定的高度（此处为，0）并将其从指定位置置于容器内。

PS：!important仅用于覆盖你硬编码的高度。

Answer 2

不要使用身高！对每个span.text-content都很重要。它应该在height: 100%;这里正常工作。同时从display: table;移除span.text-content，我们绝对会将内部空间放在中心位置。对于内跨：

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

悬停层中的文字很短，所以我们可以预期它永远不会换行。这意味着使用top：50％，matgin-top减去文本高度的一半即可用于垂直居中。

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

在响应式布局上无法使HTML文本保持在div内部居中

2 个答案: