文本左对齐和右对齐,并且在固定标题中居中居中
我想在固定标题中对齐文本左右居中并垂直居中。目前它已经居中。但它集中于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;
}
如果你喜欢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
}
你是如何得到10px的'margin-top' – user1478743 2014-09-11 18:12:10
@ user1478743什么? – Akshay 2014-09-12 07:10:39
多德
您可以添加利润率顶用这种方式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
}
为什么'margin-top:24px;'而不是35px; ?我明白,如果我做了35像素,即使高度为75像素,它也不会居中。 – user1478743 2014-09-11 18:10:29
http://jsfiddle.net/skip405/NfeVh/4/ – Romain 2014-09-11 00:45:46
你关心什么命令你的HTML元素在? home元素可以出现在标记中的ul元素之前吗? – 2014-09-11 01:02:16