将文本定位在图像上 (html,css)

Question

所以，我有一张图片，我想在图片的中央显示一些文字。

代码：

.img {
    position: relative;
}

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

好的，所以我设法做到了。但问题是：当我调整浏览器大小时图像变小时，文本会超出图像范围。

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

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

提前致谢。

Answer 1

使用 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>

Answer 2

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

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>

Answer 3

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

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。 Line-height: (support)

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

标题的行高等于容器的高度并且
标题是 one-liner。

_{（查看注释 #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. Table (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 等于 parent 的高度。在这种情况下，使用 50% of the parent height，因为标题 font-size 是 2x parent 的 font-size 也表示为 ems.
关于您提到的 @media 查询，它不应该用于诸如居中文本之类的简单内容，而是用于 showing/hiding基于屏幕尺寸等的元素
如果您关心网站在较小屏幕上的可移植性，我的建议是避免使用 px （像素），而是使用 % (percentages) 将根据屏幕或 em (ems) 通过使用 [ 手动更新容器的 font-size =31=]查询.

将文本定位在图像上 (html,css)

Positioning text over image (html,css)

html

css

centering

1.弹性框： (support)

2。 Line-height: (support)

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

4. Table (support)

备注：