前端UI页面布局汇总

最新推荐文章于 2024-07-18 11:11:53 发布

zph7585654

最新推荐文章于 2024-07-18 11:11:53 发布

阅读量301

点赞数

分类专栏：前端 css

本文链接：https://blog.csdn.net/zph7585654/article/details/88128036

版权

本文总结了前端布局中实现元素居中的多种方法，包括vertical-align、position定位、flex布局、margin和width、fit-content以及table-cell等。同时探讨了除去浏览器原生滚动条的几种解决方案，并介绍了获取元素宽度的不同属性，如offsetWidth、clientWidth、scrollWidth等。还提到了百分比在margin、top和transform中的应用。

摘要由CSDN通过智能技术生成

居中的实现

1. 使用属性vertical-align（垂直）

首先vertical-align要搭配inline-block使用才能生效。

其次vertical-align:middle是将该元素的中心和父元素基线对齐。

span{
   display:inline-block;vertical-align:baseline;}

.heighest{
   display:inline-block;height:200px;width:50px;background:red;vertical-align:baseline;}

.second_heighest{
   display:inline-block;height:180px;width:50px;background:red;vertical-align:baseline