酷酷问答>生活百科>absolute内容自适应居中

absolute内容自适应居中

2024-08-24 23:32:55 编辑：zane 浏览量：600次

absolute内容自适应居中

的有关信息介绍如下：

absolute内容自适应居中

在前端编码中，我们经常会使用到absolute定位，使用absolute定位后会存在一个问题，那就是把绝对定位里的内容设置自动居中。那如何使用absolute定位后让内容自适应居中呢？

新建一个html 页面。如图：

在html页面上找到标签，在标签里面新建一个

标签，同时为这个

标签设置类为：relative；然后在

标签里再新建一个

标签，这个标签的样式类为：absolute，并在该div标签里输入一些需要居中的内容。

相关代码：

就算你用了absolute定位，我也要居中

效果如图：

设置样式。

1.在html页面找到标签，在<title>标签后新建一个<style>标签；2.在<style>标签创建relative、absolute类；3.relative类设置内容为：position: relative;4.absolute类设置内容为：position: absolute; text-align: center;相关代码： <style> .relative{ position: relative; } .absolute{ position: absolute; text-align: center; } </style>发现text-align: center无效。把html页面代码保存后我们使用浏览访问，发现内容无法居中。如图：解决内容无法居中。回到html代码页面找到absolute类，在这个类中添加：left: 0; right: 0；然后保存; 如图：重新使用浏览器打开，我们会发现内容已经自动居中了。如图：所有代码：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>absolute定位内容居中

就算你用了absolute定位，我也要居中