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

tommyd456

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

父容器#navposition: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>
匿名的

试试这个-演示

如果给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;
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何获得输入单选元素以水平对齐?

来自分类Dev

将元素居中在可调整大小的背景上的固定位置

来自分类Dev

如何使固定位置的元素水平居中

来自分类Dev

如何将仅具有最大宽度且具有固定位置的div水平居中?

来自分类Dev

当导航栏回到固定位置时使其动画

来自分类Dev

固定位置响应居中

来自分类Dev

元素的固定位置?

来自分类Dev

将PDF嵌入网页并水平滚动以使其居中

来自分类Dev

是否可以使绝对定位的img水平居中?

来自分类Dev

放置父元素以使其子元素在屏幕上居中

来自分类Dev

需要居中对齐烤面包机并使其固定

来自分类Dev

如何访问多维数组元素以使其相乘

来自分类Dev

有最小宽度时,如何使元素居中(水平)固定位置?

来自分类Dev

位置:固定;使其消失的div元素消失

来自分类Dev

单击某个元素以使其向前滑动后的元素

来自分类Dev

DIV位置:固定;水平居中

来自分类Dev

向左浮动以使元素水平对齐

来自分类Dev

将div以固定位置水平居中

来自分类Dev

如何使固定位置的元素水平居中

来自分类Dev

固定位置响应居中

来自分类Dev

水平居中对齐块元素

来自分类Dev

无法将div水平居中,涉及固定位置

来自分类Dev

水平和垂直居中绝对定位的元素

来自分类Dev

如何使div固定位置水平滚动?

来自分类Dev

放置父元素以使其子元素在屏幕上居中

来自分类Dev

如何访问多维数组元素以使其相乘

来自分类Dev

在HTML5中,如何对齐多个元素以使其出现在列表定义的同一行上?

来自分类Dev

CSS 水平菜单不居中位置固定

来自分类Dev

Bootstrap:在模态内固定位置的元素未与视口对齐

Related 相关文章

热门标签

归档