使用 Foundation 在图像上居中文本

Question

所以我正在尝试做一件看似非常简单的事情，但我似乎无法让它工作...将一些文本置于图像的中心。我希望图像缩放整个屏幕宽度，两边都没有白色 space，缩放高度比方说屏幕的 30%，然后将文本放在图像的正中央.

我创建这个是为了说明我的问题： https://jsfiddle.net/sq9we118/

我试过：

text-align: center;

^^ 什么都不做。

还有：

top: 50%;
left: 50%;

^^将文本移动 50% 以上，但根本不会向下移动。

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

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

此外，如您所见，我有：

width: 100%;
height: 15em;

图片。如果我将高度更改为任何百分比，图像就会消失。我可以为两者设置像素，但我希望图像根据屏幕大小进行缩放。

我是 web 开发的新手，所以这一切都非常令人沮丧，因为我什至无法解决这两个简单的问题，哈哈。谢谢伙计们（和姑娘们）。

Answer 1

CSS-Tricks 站点有 a fantastic guide on how to center with CSS that should be able to help you in the future. I've created 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 在图像上居中文本

Centering Text over Image using Foundation

text

overlay

image

center