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 个答案: