使用 Foundation 将文本居中放置在图像上

Question

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

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

我试过了：

text-align: center;

^^ 什么都不做。

还有：

top: 50%;
left: 50%;

^^将文本移动超过 50%，但根本不向下移动。

我尝试过的不止这些，我只是不记得我做了什么。我已经尝试了多个“div”设置，图像和文本在同一个 div、单独的 div、只有单独的 div 中的文本，以及我在本网站上找到的各种 CSS 设置作为其他有类似问题的答案，但没有一个对我有用。

我正在使用 Foundation，如果这有什么不同的话。我在没有 Foundation 的情况下尝试过，如果没有左右空白，我什至无法将图像缩放到 100% 的屏幕宽度。

另外，如你所见，我有：

width: 100%;
height: 15em;

图片。如果我将高度更改为任何 %，图像就会消失。我可以为两者都做像素，但我希望图像可以缩放以适应屏幕大小。

我是 Web 开发的新手，所以这一切都很令人沮丧，因为我什至无法解决这两个简单的问题，哈哈。谢谢大家（和女孩）。

Answer 1

CSS-Tricks 网站上有 a fantastic guide 介绍如何以 CSS 为中心，这应该能够在未来帮助您。我已经创建了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%;
}