在图像上定位文本（html，css）答案

【问题标题】：Positioning text over image (html,css)在图像上定位文本（html，css）
【发布时间】：2017-07-15 23:05:08
【问题描述】：

所以，我有一个图像，我想在它的中心显示一些文本。

代码：

.img {
    position: relative;
}

.img h3 {
    position: absolute;
    width: 100%
    top: 85px;
    text-align: center;
}

好的，所以我设法做到了。但事情是这样的：当我调整浏览器的大小并且图像变小时，文本会超出图像。

所以我的问题是，我必须对所有不同的维度使用@media 规则吗？我如何知道在我的 CSS 中使用哪些维度？

或者我可以做些什么让我的文本元素始终留在图像内？

提前谢谢你。

【问题讨论】：

对top 使用% 单位。如果您需要更具体的帮助，请给我们minimal reproducible example 您目前的情况，以便我们查看问题。
你能显示你的html吗
谢谢！添加 % 而不是像素可以解决高度问题。我的文本对齐也有问题，我想知道 text-align:center;是不正确的？这是html <div class="homeimg1"> <img src="http://localhost/ks/wp-content/uploads/1.jpg" alt="" width="355" height="245" /> <h3>SET UP</h3> </div>

标签： html css centering

【解决方案1】：

您可以使用许多不同的选项，每个选项都有其优点和缺点，并且在浏览器支持方面也有所不同：

1。弹性盒： (support)

Flexbox 是您拥有的最简单的选项，无需使用表格或将元素从文档流中取出，但它不像其他可行选项那样受到广泛支持。我相信很快就会有。

代码：

/* --- CSS --- */
.background {
    height: 10em;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
}

.background > h4 {
    color: #000;
    font-size: 2em;
    font-family: sans-serif;
}

<!--- HTML --->
<div class = "background" style = "background-image: url(https://images.freecreatives.com/wp-content/uploads/2015/05/HD-Vintage-Photography-Wallpaper.jpg);">
  <h4>Hello, world!</h4>
</div>

2。行高： (support)

使用此选项时，您必须确保：

标题的行高等于容器的高度和
标题是单行的。

_{（查看注释 #2）}

代码：

/* --- CSS --- */
.background {
    height: 10em;
    text-align: center;
    background-size: cover;
    background-position: center;
}

.background > h4 {
    color: #000;
    font-size: 2em;
    margin: 0 auto;
    font-family: sans-serif;
    line-height: 5em; /* container height / 2 */
}

<!--- HTML --->
<div class = "background" style = "background-image: url(https://images.freecreatives.com/wp-content/uploads/2015/05/HD-Vintage-Photography-Wallpaper.jpg);">
  <h4>Hello, world!</h4>
</div>

3。位置：绝对&变换： (support)

这可能是总体上最常用的方法，因为它得到了足够广泛的支持，但它的缺点是使元素 (title) 脱离了正常流程。

代码：

/* --- CSS --- */
.background {
    height: 10em;
    position: relative;
    background-size: cover;
    background-position: center;
}

.background > h4 {
    top: 50%;
    left: 50%;
    margin: 0;
    color: #000;
    font-size: 2em;
    position: absolute;
    font-family: sans-serif;
    transform: translate(-50%, -50%);
}

<!--- HTML --->
<div class = "background" style = "background-image: url(https://images.freecreatives.com/wp-content/uploads/2015/05/HD-Vintage-Photography-Wallpaper.jpg);">
  <h4>Hello, world!</h4>
</div>

4。表格 (support)

好吧，如果有人发现了这一点，我可能会被处以私刑，但你可以使用 display: table 作为容器，使用 display: table-cell 作为标题表格对齐的优势。

您现在可以将您的标题居中：

水平方向，使用 text-align: center 和
垂直，使用 vertical-align: middle

代码：

/* --- CSS --- */
.background {
    width: 100%;
    height: 10em;
    display: table;
    background-size: cover;
    background-position: center;
}

.background > h4 {
    color: #000;
    font-size: 2em;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    font-family: sans-serif;
}

<!--- HTML --->
<div class = "background" style = "background-image: url(https://images.freecreatives.com/wp-content/uploads/2015/05/HD-Vintage-Photography-Wallpaper.jpg);">
  <h4>Hello, world!</h4>
</div>

注意事项：

由于我们对图像使用空的 div，因此必须始终明确定义 height。
使用line-height 使元素垂直居中要求line-height 等于到父元素的高度。在这种情况下，使用父级高度的50%，因为标题的font-size是父级的2x，父级的font-size，它也用@表示987654345@.
关于你提到的 @media 查询，它不应该用于简单的东西，比如居中文本，而应该用于根据屏幕大小显示/隐藏元素等。李>
如果您关心您的网站在小屏幕上的可移植性，我的建议是避免使用 px (pixels)，而是使用 @ 987654348@ (percentages) 将根据屏幕更新或 em (ems) 通过手动更新 font-size 使用 @media 查询的容器。

【讨论】：

非常感谢您的帮助和建议！第二种和第三种方法效果很好！我也会尝试其他两个。在行高方法中，我不明白为什么标题的行高必须比容器高度低 %50。对我来说，标题以 16em 为中心；容器的高度和 10em；为行高。
这只是一种在大多数情况下都有效的技巧。我怀疑您看到的问题是由于标题或容器的某些 margin 或 padding 造成的。如果我是你，我会选择其他三个中的一个。

【解决方案2】：

使用top: 50%;、left: 50%; 和transform: translate(-50%, -50%);。

这些天非常常见的技巧，具有出色的浏览器支持。需要注意的是，您需要为 .img 指定某种高度，以便正确定位内部元素。在这个例子中，我使用了一个vh 单位作为高度来显示它的响应能力。调整大小。

我也更喜欢在这样的事情上使用背景图像，因为它使标记变得更加容易。您要么想要使用background-image，要么在div.img 中包含<img> 标签。

.img {
    position: relative;
    width: 100%;
    height: 50vh;
    background: #ccc;
    background-image: url('https://images.unsplash.com/photo-1474693220100-7cddec4346f6?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=');
    background-size: cover;
    background-position: 50% 50%;
}

.img h3 {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0 auto;
    transform: translate(-50%,-50%);
    font-family: sans-serif;
    color: white;
    font-size: 26px;
}

<div class="img">
  <h3>Hello, world!</h3>
</div>

【讨论】：

谢谢杰西！通过使用此代码，虽然在我调整大小时文本保持静态，但我的文本并没有在中心对齐。如果我放置 text-align:center 它将居中，但同样，如果我调整窗口大小，它会关闭。 [链接]prntscr.com/ed1nvy
@AlexMpatzios 可能是因为 h3 上面有 width: 100%;。试着把它去掉，因为我的例子没有。
运行代码 sn-p 它正确居中，直到文本分成两行并具有较小的窗口。然后文字太偏左了。这仍然是一个很好的解决方案。

【解决方案3】：

不要在每次调整屏幕大小时使用媒体查询来使文本居中。下面的解决方案将起作用。

CSS

.container {
    position: relative;
}

.center {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    font-size: 18px;
}

img { 
    width: 100%;
    height: auto;
    opacity: 0.3;
}

HTML

<div class="container">
  <img src="" >
  <div class="center">Centered</div>
</div>

【讨论】：