文本在固定页眉中左右对齐并垂直居中答案

【问题标题】：Text Align Left and Right and Vertically Centered in Fixed Header文本在固定页眉中左右对齐并垂直居中
【发布时间】：2014-09-11 13:33:51
【问题描述】：

我想在固定页眉中左右对齐并垂直居中对齐文本。现在它当前居中。但它以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;
}

【问题讨论】：

jsfiddle.net/skip405/NfeVh/4
你关心你的 HTML 元素的顺序吗？ home 元素可以出现在标记中的 ul 元素之前吗？

标签： html css alignment center

【解决方案1】：

喜欢http://jsfiddle.net/bassmu1x/5/的可以加margin top

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
}

【讨论】：

你是怎么得到margin-top的10px的

【解决方案2】：

老兄

这样使用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 像素，它也不会居中。