使用 @media 查询居中对齐导航栏在 Firefox 和 IE 中不起作用答案

【问题标题】：Center aligning nav bar with @media query not working in Firefox and IE使用 @media 查询居中对齐导航栏在 Firefox 和 IE 中不起作用
【发布时间】：2014-11-12 03:57:23
【问题描述】：

我正在创建一个带有导航栏的视频中心。而不是使用手风琴导航折叠我只是希望菜单进入下一行并居中。这是我用来产生这种效果的代码。

@media screen and (max-width: 850px){
  .navbar ul li {
    float: center;
    display: inline-block;
  }
  .last {
    background: none !important; 
  }

}

这个 sn-p 在 Chrome 中完美运行，但在 Firefox 和 IE 中导航栏不居中。 .last 类的媒体查询更改有效，所以我知道问题不在于媒体查询，而在于 Firefox 和 IE 如何呈现导航栏。

有人对如何解决这个问题有建议吗？如果需要，我可以分享更多代码。这里是网站：http://fivebehaviors.hubs.vidyard.com/

【问题讨论】：

浮动不允许“中心”。你可以试试text-align:centerul
这也不起作用。

标签： html css navbar

【解决方案1】：

正如 sdleihssirhc 所说，我认为 text-align:center; 会在 ul 上工作。它可能不起作用，因为似乎 ul 宽度超出了内容，所以也许尝试将 width:auto; 放在 ul 上。另一方面，您可以对 ul 和导航栏 div 执行相同的操作，并尝试将 margin:0 auto; 置于中心位置。

【讨论】：