Question

我有三个组件 - 徽标，#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>

Answer 1

如果fixed定位的徽标没有明确的width，您可以使用CSS Transforms横向排列，如下所示：

<强> EXAMPLE HERE

#logo {
  position:fixed;
  /* other declarations */

  left:50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}

值得注意的是转换are supported in IE9+。

如果您可以为元素指定显式width，则可以使用负边距（等于宽度的一半）来获得相同的结果。

#logo {
  position:fixed;
  /* other declarations */
  width: 100px;
  left:50%;
  margin-left: -50px; /* = 100px / 2 */
}

Answer 2

避免使用left:50%;

#logo {
  position:fixed;

  right:50%;
  font-family: 'Pacifico', cursive;
  font-size:28px;
  color:#333333;
}

Answer 3

尝试 - 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;
}

将固定定位元素对齐到水平居中

3 个答案: