position:absolute的小坑

一般说道元素居中显示会有多种方法，今天使用一个很常见水平居中的方式~即父元素相对定位，子元素绝对定位然后left：50%~再让其margin-left偏移负的子元素宽度的一般~因为一些特殊的需求~没有给子元素设置尺寸~而是使用js获取元素的宽度在通过js去操作器margin-left~于是就出现了个比较坑的问题~css那边没有设置尺寸~仅仅给子元素设置了position:absolute;left:50%~当需要居中的子元素中的内容比较多的时候子元素会分作两行甚至多行显示~一次避免超出父元素~当通过js获得了此时的宽度并设置了负的margin偏移后~子元素有了足够的空间将内容一行显示~此时就很自然的恢复成一行了~那视觉上就是明明设置了margin-left的值~但是元素却没有居中~因为前面那次获取的宽度是子元素多行显示内容时候的宽度~而程序运行完后子元素因为有了margin-left的偏移（尽管这个偏移并不是我们最后想设置的值）于是就有了足够的横向长度用以在一行显示其内容~解决的方式要不就是在js那边设置两次margin-left值

var tipWidth = parseInt($('.sin_tip12').css('width')) / 2;
$('.sin_tip12').css('margin-left', -tipWidth);
var tipWidth = parseInt($('.sin_tip12').css('width')) / 2;
$('.sin_tip12').css('margin-left', -tipWidth);

要不就是给子元素一个固定的尺寸~

转载于:https://www.cnblogs.com/Liujunyan/p/5388364.html