手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

absolute内容自适应居中

时间:2024-10-14 03:41:52

1、新建一个html 页面。如图:

absolute内容自适应居中

2、在html页面上找到<body>标签,在<body>标签里面新建一个<div>标签,同时为这个<div>标签设置类为:relative;然后在<div>标签里再新建一个<div>标签,这个标签的样式类为:absolute,并在该div标签里输入一些需要居中的内容。相关代码:<div class="relative"> <div class="absolute"> 就算你用了absolute定位,我也要居中 </div> </div>效果如图:

absolute内容自适应居中

3、设置样式。1.在html页面找到<title>标签,在<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>

absolute内容自适应居中

4、发现text-align: center无效。把html页面代码保存后我们使用浏览访问,发现内容无法居中。如图:

absolute内容自适应居中

5、解决内容无法居中。回到html代码页面找到absolute类,在这个类中添加:left: 0; right: 0; 然后保存; 如图:

absolute内容自适应居中

6、重新使用浏览器打开,我们会发现内容已经自动居中了。如图:

absolute内容自适应居中

7、所有代码:<!DOCTYPE html><html><head><meta charset="U皈其拄攥TF-8"><title>absolute定位内容居中</title><style>.relative{position: relative;}.absolute{position: absolute;text-align: center;left: 0;right: 0;}</style></head><body><div><div>就算你用了absolute定位,我也要居中</div></div></body></html>

absolute内容自适应居中
© 手抄报圈