如何通过javascript动态获取浏览器宽度,设置css居中?

问题描述

问 题

$('ul').width($(window).width());
$('ul').css({"margin-left":"auto","margin-right":"auto"});

我想设置ul的宽度以实现ul能够水平居中显示,但不想讲ul宽度固定死,于是想到用js动态设置CSS样式,可是为什么以上代码并不能实现我想要的效果呢?

当我将代码改成:

$('ul').width($(window).width()-300);
$('ul').css({"margin-left":"auto","margin-right":"auto"});

却能够实现居中.

例外单独设置CSS,将宽度设置成100% 却又不能实现居中,这是为何???

width: 100%; margin: 0 auto; 

当width: 90%;时为何又可以居中了..????

解决方案

ul是块级元素，如果你不设置width或者width为100%（而它的父元素也是块级的话，并且也没有设置width），等于它已经最大宽度了，你设置margin并不是没有效果，只是它已经占满屏幕了，虽然没有明显的效果，但是它确实也是居中了。

所以当你把width变短后（比如你说的-300或者width:90%），它的宽度不再是最大宽度，因此你看起来就有明显的效果了。

如果你不想设置ul的宽度的话，就可以把它设置能行内元素（可以是inline也可以是inline-block，反正这个盒子模型是行内盒子模型就行），然后设置居中的话，只需要在父级元素设置text-align:center即可。

至于用不用使用js，我觉的不用，使用css足够了，是不是这个意思？DEMO

这篇关于如何通过javascript动态获取浏览器宽度,设置css居中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！