咨询电话:
15628812133
10
2018/11

左侧元素居左,中间元素居中,右侧元素居右

发布时间:2018-11-10 10:56:51
发布者:luanqingwei
浏览量:
0

前几天文汇小编在进行网页页面开发时,遇到了一个页面需求,就是页面的上下翻页与返回列表的按钮功能,下面就是实现的效果图。

image.png

想要实现这样的效果,可以左侧的左浮动,右侧的右浮动,中间的使用margin:0 auto;这是小编当时的想法,但这个想法被实现起来的时候,还是遇到了问题,就是中间的元素无法居中。由于元素浮动了,导致了中间元素的margin:0 auto无效。当时的效果是这样的;

image.png

最后小编将元素的父级盒子设置相对定位,将中间的元素设置绝对定位,left:50%;margin-left的值等于负的自身宽度的一半,使元素居中显示,最后的实现效果。

image.png

关键词:
返回列表