html - 对齐固定位置的元素以使其水平居中

我有三个部分-徽标，#menuA和menuB。我希望徽标居中对齐，左上方的menuA和右上方的menuB。

父容器#nav的position:fixed似乎引起了我的问题。我可以大致在中间找到徽标，但它似乎稍微偏右-我认为是因为menuA比menuB宽。

这是我到目前为止的内容：Fiddle Demo

#nav {
  position:fixed;
  height:30px;
  background:#FFF;
  padding:10px 20px;
  z-index:1;
  top:0;
  right:0;
  left:0;
}

#logo {
  position:fixed;
  left:50%;
  right:50%;
  font-family: 'Pacifico', cursive;
  font-size:28px;
  color:#333333;
}

#menuA {
  float:left;
}

#menuB {
  float:right;
}

和HTML

<div id="nav">
  <div id="logo">Logo</div>

  <div class="ui basic buttons" id="menuA">
    <a ui-sref="editor"><div class="ui button" style="padding-left:8px;padding-right:8px;"><i class="file outline icon" style="margin-right:0px;"></i>New</div></a>
    <div class="ui button" style="padding-left:8px;padding-right:8px;" ng-click="save()"><i class="add icon" style="margin-right:0px;"></i>Save</div>
    <div class="ui button" style="padding-left:8px;padding-right:8px;" ng-click="fork()"><i class="fork code icon" style="margin-right:0px;"></i>Fork</div>
  </div>

  <div class="ui selection dropdown" id="menuB">
    <input type="hidden" name="gender">
    <div class="default text">Language</div>
    <i class="dropdown icon"></i>
    <div class="menu">
      <div class="item" data-value="0">Javascript</div>
      <div class="item" data-value="1">HTML</div>
      <div class="item" data-value="2">CSS</div>
      <div class="item" data-value="3">Python</div>
    </div>
  </div>

  <div style="clear"></div>

</div>

最佳答案

请尝试-DEMO

如果您给徽标加上width（即100px），那么它将解决您的问题。

的CSS

#nav {
  position:fixed;
  height:30px;
  background:#FFF;
  padding:10px 20px;
  z-index:1;
  top:0;
  right:0;
  left:0;
}

#logo {
  position:fixed;
  left:50%;
  font-family: 'Pacifico', cursive;
  font-size:28px;
  color:#333333;
  text-align: center;
  width: 100px;
  margin-left: -50px;
}

#menuA {
  float:left;
}

#menuB {
  float:right;
}