垂直对齐NAV到HEADER

Question

我有一个带有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/

Answer 1

您可以使用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;

Answer 2

在.nav css上

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

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

并删除bottom: 0;

jsfiddle

或者，您可以使用padding-bottom和padding-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>