导航类“不定宽水平居中”的几种思路

定宽居中我们见的很多,可以用width、text-align、margin等来实现,但是如果没有宽度呢?
下面提供几种思路供大家参考,给出基本的html结构和思路,当然了,也不一定是这样的结构,道理搞懂了相信大家能够灵活变通。另外,里面的项是有固定宽和高的。



方法一:绝对、相对定位或者translateX

nav{position:absolute;left:50%;}
nav ul{position:relative;left:-50%;overflow:hidden;}
nav ul li{width:150px;height: 300px;float: left;background: #0F0;}

header默认宽度100%,把nav绝对定位,left:50%;然后里面的ul进行相对定位,left:-50%;在这点上绝对定位是办不到的,因为它把布局破坏掉了,容器宽度没有的情况下,它就面目全非,也无从谈起left:-50%。可能有人说,margin-left:-50%:也是可以的吧,这个在现有条件下是不行滴,它需要父容器宽度固定。那还有其他的么,当然,使用translateX(-50%)同样可以达到效果,因为它也不需要父容器的宽度。

这种方法有一点需要注意,因为你定的外层容器left:50%;如果你加了很多项进去,或者每一项的宽度过宽,导致那个“隐形”的容器(nav)右侧超过了浏览器的宽度,溢出了的话,里面的内容是会被挤下去的,这个时候,就违背初衷了,使用的时候要小心哦!~

方法二:使用Flexbox来实现

如果有过一定了解的人会知道,这个方法实现起来so easy,只不过需要浏览器支持它罢了,使用此法,则不需要定位了。

css如下

ul{
     display: -webkit-flex;
     -webkit-flex-direction: row;
     -webkit-justify-content: center;
    }

此法可以说是干净利落不留痕呐,just低版本IE不兼容~此处仅加了webkit前缀,不了解的童鞋且勿直接照搬使用哦。

更多flexbox相关可参考flexbox

方法三:js获取项目数设置宽度

这种方法可以说是有点笨,只是绕了个弯子,仍然使用的是常规固定宽度水平居中的方法,通过js获取li,得到一个数组,然后数组长度乘以单项宽度,得到应有的总宽度,把总宽度值赋给外层ul即可,虽然此法略显笨拙,但如果在你不了解其他方法的情况下,不失为一种可行方案。

方法四:传说中的float:center

nav{
     text-align:center;
     overflow:hidden;
}
nav ul{
     position:relative;
     left:50%;
     float:left;
}
nav ul li{
     float:left;
     width:150px;
     height: 300px;
     position:relative;
     right:50%;
}

这种方法是一位前辈介绍的“古老”的方法,简单说来,是用了两次相对定位,ul相对定位,left:50%;li相对定位,right:50%或left:-50%也可。用我的话概括一下就是:整体右移,逐项左移。咦?这听起来似乎跟第一种方法有异曲同工之处。呵呵。就是这样的,本人能力有限,更深刻的道理也讲不出来。如果有其他玄机,还请高手不吝赐教。

到最后了,说说我是怎么想起谈这个话题的吧,是一个企鹅的前辈考我的,当时,我本来是可以想到第二、三种方法,但顾及到浏览器兼容性和“笨”方法的缘故,我用了第一种方法,可惜还紧张没写对~所以,一直在寻求更多解决方案,以上是目前为止所知的几种。当然,只是提供了思路,可能有瑕疵还有细节没有说到,大家自己研究一下吧。会收获更多。欢迎交流!~

灵感_idea wechat
欢迎关注我的公众号“灵感周末”,每个周末推送优质好文!
给加个蛋呗