0

我正在尝试将标题 > 部分居中。它适用于chrome和opera，但firefox推到左侧。我创建了一个名为and.body的类。它无法在 firefox 上识别（我使用的是 firefox 18）。width: 960pxmargin: 0 automargin: 0 auto

我已经尝试将display值设置inline-block为.body类。它确实居中，但它推nav到底部（适用于所有浏览器）。

这就是我想要做的

HTML

<header id="header">
<section class="body box">
  <section class="flex1">
    <a>MyWebsiteName</a>
  </section>
  <nav class="nav-list flex1">
    <ul>
      <li>
        <a href="">Login</a>
      </li>
      <li><a href="">Register</a></li>
      <li><a href="">Help</a></li>
    </ul>
  </nav>
</section>

CSS

.box {
  display: -webkit-box;
  display: -moz-box;
  display: -o-box;
  display: box;
 -webkit-flex-direction: row;
 -mox-flex-direction: row;
 flex-direction: row;
 -webkit-box-align: center;
 -moz-box-align: center;
 -o-box-align: center;
 box-align: center;
}

.flex1 {
 -webkit-box-flex: 1;
 -moz-box-flex: 1;
 -o-box-flex: 1;
 box-flex: 1;
}

.body {
  clear: both;
  width: 960px;
  margin: 0 auto;
}

header {
  background: #0C2C52;
  box-shadow: 0 0 .2em .1em rgb(78, 76, 76);
 -webkit-box-shadow: 0 0 .2em .1em rgb(78, 76, 76);
 -moz-box-shadow: 0 0 .2em .1em rgb(78, 76, 76);
 margin-bottom: 1em;
 padding: 1em 0;
}

header > section {
  height: inherit;
}

#header section.flex1 {
  display: inline-block;
}

.nav-list {}

.nav-list > ul {
  float: right;
}
4

2 回答 2

0

答案并不完美，但相当方便。

就个人而言，我对浏览器开发团队（Microsoft、Mozilla 等）在为他们的应用程序规划 HTML 界面时没有很好地合作感到沮丧。W3C 根本无法对这些公司强制执行：对我们来说是一个主要缺点，现在快到 2014 年了，仍然存在这些荒谬的咕哝级问题。在商界工作了十年，我有点沮丧。请参阅下面的答案...（相应地设置宽度）

回答

<style type="text/css">
    .box_wrap{margin:0 auto;width:50%;}
</style>

<div class="box_wrap">
    <div class="your_flex_box"> ... </div>
</div>
于 2013-12-19T21:09:44.533 回答
0

这是改变你的位margin: 0 auto;：

.box {
  display: -moz-box;
}

如果你只离开它工作正常<section class="body">。jsfiddle 示例

于 2013-02-19T08:44:03.000 回答