图像 CSS 上的文本答案

【问题标题】：Text over Image CSS图像 CSS 上的文本
【发布时间】：2014-01-21 16:27:06
【问题描述】：

我目前遇到一些 CSS/HTML 代码问题。

http://codepen.io/anon/pen/bgHGn

我在 div (feature-bg) 中有页面背景，这是为了填充整个页面。然后内容从底部向上滚动，但这无关紧要。

我在尝试将大标题显示在页面中间（无论分辨率/窗口大小）并固定在背景上以便当用户滚动时，内容会覆盖它时遇到问题？

我不确定这是否有意义，甚至可能。

谢谢！

【问题讨论】：

这个问题是，如果您将位置设置为固定，然后将顶部和左侧定位设置为 50%，那么您必须对其进行调整以使其完全居中。这是因为它会将 div 的角推到距左侧和顶部 50% 宽度的位置。

标签： css image text

【解决方案1】：

您想将 text-alignment 属性设置为居中

.largeheader{
    position: fixed;
    margin: 0 auto;
    font-size: 100px;
    z-index:2;
    text-align: center;
    top: 50%;
    left: 50%;
}

核心问题并不完全位于页面的中心，因此正如@RCorrie 在他的回答中所说，您可以为 div 设置宽度和高度，然后通过一些简单的数学运算来修复边距。现在，如果您想开始使用 javascript 和 jQuery，那完全是另外一种球类游戏，您绝对可以用最少的工作完成此操作，而且您不必不断更改创建的每个网页的 div 大小和边距。

【讨论】：

这不会使其垂直居中，也不会在滚动时将内容固定在背景上。

【解决方案2】：

查看解决方案的 CSS 代码：

http://codepen.io/anon/pen/GqeBa

.largeheader {
     position: fixed;
     top: 50%;
     left: 50%;
     height: 100px;
     width: 250px;
     margin: -50px 0 0 -112px;
     font-size: 100px;
     z-index: 2;
}

固定定位允许元素在您滚动页面时保持原位。

【讨论】：

是的，但是当您想更改字体或使用其他内容时，您必须花时间弄乱边距以使其居中
这使文本完美居中。但是当内容向上滚动时，文本仍然位于所有内容之上。我尝试使用 z-index，但无法正常工作。
制作z-index:0;，然后将z-index:9添加到内容容器中。
但要确保内容容器设置为position:relative;
这是您需要的吗？您只需将position:relative 添加到#wrapper 并设置背景颜色。

【解决方案3】：

要使大标题水平居中，您可以按照@metsales 的建议使用text-align: center;。

为了使大标题垂直居中，您可以使用few different options。对于这种情况，由于您希望大标题位于页面中心，我建议使用链接文章中的“绝对定位和负边距”方法。

你会得到这样的结果：

.largeheader {
    line-height: 40px;

    position: absolute;
    top: 50%;
    margin-top: -20px;
    left: 0px;
}

要在用户滚动时将标题放在其他内容后面，您需要使用其z-index 属性。我无法提出任何建议，因为我不知道您的其余标记，但您可能想要一个负值，而且 MDN 上有一个不错的 article。

【讨论】：

除非您指定宽度，否则text-align:center; 不会做任何事情...即当元素设置为absolute 或fixed 时