2014-09-11 57 views
0

我想在固定标题中对齐文本左右居中并垂直居中。目前它已经居中。但它集中于line height,我不确定这是否是正确的做法。文本左对齐和右对齐,并且在固定标题中居中居中

这里是的jsfiddle:http://jsfiddle.net/bassmu1x/1/

<body> 
<div class="header"> 
    <ul class="links"> 
     <li>Archive</li> 
     <li>About</li> 
     <li>?</li> 
     <li>Submit</li> 
    </ul> 
    <div class="home">home</div> 
    <div style="clear: both;"></div> 
</div> 

.header { 
background: #f5f5f5; 
width: 100%; 
display: block; 
position: fixed; 
height: 75px; 
} 

ul li { 
list-style-type: none; 
display: inline; 
float: right; 
text-transform: uppercase; 
padding-right: 3px; 
line-height: 35px; 
} 

.home { 
float: left; 
text-transform: uppercase; 
padding-right: 3px; 
line-height: 35px; 
} 
+0

http://jsfiddle.net/skip405/NfeVh/4/ – Romain 2014-09-11 00:45:46

+0

你关心什么命令你的HTML元素在? home元素可以出现在标记中的ul元素之前吗? – 2014-09-11 01:02:16

回答

0

如果你喜欢http://jsfiddle.net/bassmu1x/5/

ul li { 
margin-top:10px; 
list-style-type: none; 
display: inline; 
float: right; 
text-transform: uppercase; 
padding-right: 3px; 
} 
.home { 
float: left; 
text-transform: uppercase; 
margin-top:10px; 
padding-right: 3px; 
margin-top 
} 
+0

你是如何得到10px的'margin-top' – user1478743 2014-09-11 18:12:10

+0

@ user1478743什么? – Akshay 2014-09-12 07:10:39

0

多德

您可以添加利润率顶

用这种方式http://jsfiddle.net/bassmu1x/6/

HTML

<ul class="links"> 
      <li class="home">Home</li> 
      <li>Archive</li> 
      <li>About</li> 
      <li>?</li> 
      <li>Submit</li> 
     </ul> 

CSS

.header { 
    background: #f5f5f5; 
    width: 100%; 
    display: block; 
    position: fixed; 
    height: 75px; 
} 
ul{margin:0;padding:0; margin-top:24px} 
ul li { 
    padding:0; 
    list-style-type: none; 
    display: inline; 
    float: right; 
    text-transform: uppercase; 
    padding-right: 3px; 
} 
.home { 
    float: left; 
    text-transform: uppercase; 

    padding-right: 3px; 
    margin-top 
} 
+0

为什么'margin-top:24px;'而不是35px; ?我明白,如果我做了35像素,即使高度为75像素,它也不会居中。 – user1478743 2014-09-11 18:10:29