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

Question

$('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%;时为何又可以居中了..????

Answer 1

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

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

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

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

Answer 2

ul水平居中，但是不希望ul宽度固定，可以将ul的样式设置成：
display: inline-block;
然后将它的父容器的样式中：
text-align: center;
这样ul的宽高是被内容撑开的（当然也可以自己设置）

可以使用CSS样式控制的效果，不要使用JS去控制。

Answer 3

display:block;
margin:auto;

Answer 4

要想margin有效，他的父元素的宽度一定要是个确定值，同二楼说的

Answer 5

我晕，我觉得这不是一个 Js 或者 CSS 问题，而应该是一个语文题。

宽度 100% 或者 .width($(window).width()), 子元素和父元素一样宽，你还想他怎么居中？

至于不固定 ul 宽度，又想其居中，其实你应该想要的是 ul 的子元素 li 居中。

<p class="wrapper">
  <ul>
    <li>项目1</li>
    <li>项目2</li>
  </ul>
</p>

// SCSS
.wrapper { text-align: center;
  ul { display: inline-block;}
}
或者
.wrapper {
  ul { text-align: center;}
  li { display: inline-block;}
}