absolute内容自适应居中
的有关信息介绍如下:在前端编码中,我们经常会使用到absolute定位,使用absolute定位后会存在一个问题,那就是把绝对定位里的内容设置自动居中。那如何使用absolute定位后让内容自适应居中呢?
新建一个html 页面。如图:
在html页面上找到
标签,在标签里面新建一个标签,同时为这个
标签设置类为:relative;然后在
标签里再新建一个
标签,这个标签的样式类为:absolute,并在该div标签里输入一些需要居中的内容。标签,在标签后新建一个absolute定位内容居中
相关代码:
就算你用了absolute定位,我也要居中
效果如图:
设置样式。
1.在html页面找到
发现text-align: center无效。
把html页面代码保存后我们使用浏览访问,发现内容无法居中。如图:
解决内容无法居中。
回到html代码页面找到absolute类,在这个类中添加:left: 0; right: 0; 然后保存; 如图:
重新使用浏览器打开,我们会发现内容已经自动居中了。如图:
所有代码:
.relative{
position: relative;
}
.absolute{
position: absolute;
text-align: center;
left: 0;
right: 0;
}
就算你用了absolute定位,我也要居中
版权声明:文章由 酷酷问答 整理收集,来源于互联网或者用户投稿,如有侵权,请联系我们,我们会立即处理。如转载请保留本文链接:https://www.kukuwd.com/life/11956.html