文本在固定標題中左右對齊並垂直居中

Question

我想在固定標題中將文本左對齊和右對齊並垂直居中。 目前，它處於居中狀態。 但這是以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;
}

Answer 1

如果您喜歡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
}

Answer 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
}

文本在固定標題中左右對齊並垂直居中

問題描述

2 個解決方案

解決方案1
0 2014-09-11 05:24:24

解決方案2
0 2014-09-11 05:33:51

文本在固定標題中左右對齊並垂直居中

問題描述

2 個解決方案

解決方案1 0 2014-09-11 05:24:24

解決方案2 0 2014-09-11 05:33:51

解決方案1
0 2014-09-11 05:24:24

解決方案2
0 2014-09-11 05:33:51