對齊固定位置的元素以使其水平居中

Question

我有三個部分-徽標， #menuA和menuB。 我希望徽標居中對齊，左上方的menuA和右上方的menuB。

父容器#nav具有position:fixed ，這似乎引起了我的問題。 我可以大致在中間找到徽標，但它似乎稍微偏右-我認為是因為menuA比menuB寬。

這是我到目前為止的內容： Fiddle演示

#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如下所示水平放置：

這里的例子

#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%);
}

值得注意的是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

試試這個- 演示

如果您給徽標加上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;
}