垂直对齐NAV到HEADER

时间:2016-03-05 17:54:51

标签: html css header

我有一个带有test[paste0("abc", 1:3)] <- 5 的固定标头。问题是我尝试了很多东西,但是我的元素没有在中间垂直对齐。我无法使用<nav>因为它取决于屏幕分辨率。

CSS

line-height

HTML

header {
    width: 100%;
    height: 15%;
    background-color: rgba(30, 30, 30, 0.75);
    color: white;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    text-align: center;
    position: fixed;
    text-transform: uppercase;
    overflow: hidden;
}

header nav {
    text-align: center;
    display: inline-block;
    position: absolute; 
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0;

}

header nav a {
    /*line-height: 6;*/
    color: white;
    padding: 14px 16px;
    text-align: center;
    display: inline;
    text-decoration: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

演示: http://jsfiddle.net/JJ8Jc/4082/

2 个答案:

答案 0 :(得分:0)

您可以使用display flex方法垂直和/或水平对齐元素

我刚刚添加了

 header nav {
 display:flex;
 justify-content: center;
 align-items: center;
}

所以你现在的例子变成了:

&#13;
&#13;
header {
    width: 100%;
    height: 15%;
    background-color: rgba(30, 30, 30, 0.75);
    color: white;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    text-align: center;
    position: fixed;
    text-transform: uppercase;
    overflow: hidden;
    display:flex;
}

header nav {
    text-align: center;
    display:flex;
    position: absolute; 
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0;
    justify-content: center;
    align-items: center;
}

header nav a {
    /*line-height: 6;*/
    color: white;
    padding: 14px 16px;
    text-align: center;
    display: inline;
    text-decoration: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
&#13;
<header>
    <div>
        <nav>
            <a class="active" href="">Home</a>
            <a href="">News</a>
            <a href="">Info</a>
            <a href="">Contact</a>
        </nav>
    </div>
</header>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

.nav css上

,为top: 0;更改top: 50%;,然后添加以下行:

-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);

并删除bottom: 0;

jsfiddle

或者,您可以使用padding-bottompadding-top来增加标题大小,使内容保持在中间位置。或者,让它像其他答案已经提出的那样弯曲。

header {
    width: 100%;
    height: 15%;
    background-color: rgba(30, 30, 30, 0.75);
    color: white;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    text-align: center;
    position: fixed;
    text-transform: uppercase;
    overflow: hidden;
}

header nav {
    text-align: center;
    display: inline-block;
    position: absolute; 
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 0;
    left: 0;
    margin: 0;
}

header nav a {
    /*line-height: 6;*/
    color: white;
    padding: 14px 16px;
    text-align: center;
    display: inline;
    text-decoration: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
<header>
    <div>
        <nav>
            <a class="active" href="">Home</a>
            <a href="">News</a>
            <a href="">Info</a>
            <a href="">Contact</a>
        </nav>
    </div>
</header>