我有三个部分-徽标#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>
试试这个-演示
如果给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] 删除。
我来说两句