Question

所以我正在尝试做一件看起来非常简单的事情，但我似乎无法让它发挥作用......将一些文字放在图像上。我希望图像缩放屏幕的整个宽度，两边都没有空白，缩放高度让我们说像屏幕的30％，然后将文本放在图像的中心。

我创建了这个以显示我的问题： https://jsfiddle.net/sq9we118/

我试过了：

text-align: center;

^^什么都不做。

此外：

top: 50%;
left: 50%;

^^将文本移动超过50％，但根本不会将其移动。

我尝试过的不仅仅是这个，我只是记不清楚我做了什么。我尝试了多个'div'设置，同一个div中的图像和文本，单独的div，只有单独div中的文本，以及我在本网站上找到的具有类似问题的其他CSS设置，但没有一个对我有用。

我正在使用基金会，如果这有任何区别。我在没有基础的情况下尝试过，我甚至无法在没有左右空白区域的情况下将图像缩放100％的屏幕宽度。

另外，正如你所看到的，我有：

width: 100%;
height: 15em;

表示图像。如果我将高度更改为任何％，图像将消失。我可以为两者做像素，但我想要缩放图像以进行屏幕尺寸调整。

我是网络开发的新手，所以这都是非常令人沮丧的，因为我甚至无法解决这两个简单的问题，哈哈。谢谢你们（和女士们）。

Answer 1

CSS-Tricks网站有关于如何以CSS为中心的a fantastic guide，以便将来能够帮助您。我创建了a Fiddle，为您的问题提供了可能的解决方案;我已经粘贴了下面的CSS。

.image {
    position: relative;
}

img.big_image {
    position: absolute;
    width: 100%;
    height: 15em;
}

div.overlay_text {
    position: absolute;
    color: red;
    font-weight: bold;
    font-size: 48px;
    left: 0;
    text-align: center;
    top: 80px;
    width: 100%;
}

使用Foundation将图像居中放在图像上

1 个答案: