首页 > web前端 > css教程 > 如何使用 CSS 定位而不是 Flexbox 使文本在图像上居中?

如何使用 CSS 定位而不是 Flexbox 使文本在图像上居中?

Susan Sarandon
发布: 2024-12-20 00:50:09
原创
529 人浏览过

How Can I Center Text Over an Image Using CSS Positioning Instead of Flexbox?

使用 Flexbox 将文本在图像上居中

在本指南中,我们将探索使用纯 CSS 定位属性而不是 Flexbox 将文本在图像上居中的替代方法。

定位属性:

1

2

3

4

5

6

7

8

9

10

.height-100vh {

  position: relative;

}

 

.text {

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

}

登录后复制
  1. 建立相对父级:我们在高度为100vh类的容器元素上设置position:relative,以建立绝对定位的定位祖先。
  2. 绝对定位文本:我们在.text上使用position:absolute类将其定位在正常文档流之外。
  3. 水平对齐:通过设置 left: 50%,我们通过从容器的左边缘测量文本来水平居中文本。
  4. 垂直对齐: 类似地,顶部:50% 通过从顶部边缘测量文本垂直居中
  5. 精确居中:为了使文本精确居中,我们应用变换:translate(-50%, -50%)。这会将文本在两个方向上平移 -50%,最终将其移动到中心。

用法示例:

1

2

3

4

<section class="height-100vh center-aligned">

  <img class="background-image" src="image.jpg" />

  <div class="text">SOME TEXT</div>

</section>

登录后复制

通过实现这些定位属性,您可以有效地居中无需依赖 Flexbox 即可在图像上显示文本。这种方法为这种常见的布局任务提供了一个简单直接的解决方案。

以上是如何使用 CSS 定位而不是 Flexbox 使文本在图像上居中?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板