使用 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%);
}
|
登录后复制
-
建立相对父级:我们在高度为100vh类的容器元素上设置position:relative,以建立绝对定位的定位祖先。
-
绝对定位文本:我们在.text上使用position:absolute类将其定位在正常文档流之外。
-
水平对齐:通过设置 left: 50%,我们通过从容器的左边缘测量文本来水平居中文本。
-
垂直对齐: 类似地,顶部:50% 通过从顶部边缘测量文本垂直居中
-
精确居中:为了使文本精确居中,我们应用变换: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中文网其他相关文章!