在固定高度的容器中垂直居中元素

我有一個需要基於像素的導航欄的網站 - 在這種情況下爲height: 80px。在固定高度的容器中垂直居中元素

問題是，我不能將ul和li元素垂直居中。

我試過使用：top:50%; transform: translate(0,-50%)，如我的jsfiddle所示，也是flex定位，但都沒有工作。

的jsfiddle：https://jsfiddle.net/agreyfield91/w3s8cj92/

header { 
 
    height: 80px; 
 
    position: fixed; 
 
    top: 0; 
 
    transition: top 0.2s ease-in-out; 
 
    width: 100%; 
 
} 
 

 
footer { 
 
    background: #ddd; 
 
} 
 

 
* { 
 
    color: transparent 
 
} 
 

 
nav { 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: bisque; 
 
} 
 

 
nav ul { 
 
    list-style: none; 
 
    text-align: center; 
 
    margin: 0; 
 
    padding: 0; 
 
    top: 50%; 
 
    transform: translate(0, -50%); 
 
} 
 

 
nav ul li { 
 
    display: inline-block; 
 
    float: left; 
 
} 
 

 
nav ul li a { 
 
    display: block; 
 
    padding: 15px; 
 
    text-decoration: none; 
 
    color: #aaa; 
 
    font-weight: 800; 
 
    text-transform: uppercase; 
 
    margin: 0 10px; 
 
}

<header class="nav-down"> 
 
    <nav class="headernav"> 
 
    <ul> 
 
     <li><a href="#">Gig</a></li> 
 
     <li><a href="#">ity</a></li> 
 
     <li><a href="#">element</a></li> 
 
    </ul> 
 
    </nav> 
 
</header>

來源

2017-05-14 user7548189

所有你需要的是增加'的位置是：相對的; overflow：hidden;'到'nav ul'規則。「位置：相對;」使變換工作和「溢出：隱藏;」使其從子項（浮動並需要清除）中獲得高度。 [** Fiddle demo **]（https://jsfiddle.net/LGSon/w3s8cj92/3/） – LGSon

添加顯示器撓性和調整自中心：https://jsfiddle.net/w3s8cj92/1/

header { 
 
    height: 80px; 
 
    position: fixed; 
 
    top: 0; 
 
    transition: top 0.2s ease-in-out; 
 
    width: 100%; 
 
} 
 

 
footer { 
 
    background: #ddd; 
 
} 
 

 
* { 
 
    color: transparent 
 
} 
 

 
nav { 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: bisque; 
 
    display: flex; 
 
} 
 

 
nav ul { 
 
    list-style: none; 
 
    text-align: center; 
 
    margin: 0; 
 
    padding: 0; 
 
    top: 50%; 
 
    align-self: center; 
 
} 
 

 
nav ul li { 
 
    display: inline-block; 
 
    float: left; 
 
} 
 

 
nav ul li a { 
 
    display: block; 
 
    padding: 15px; 
 
    text-decoration: none; 
 
    color: #aaa; 
 
    font-weight: 800; 
 
    text-transform: uppercase; 
 
    margin: 0 10px; 
 
}

<header class="nav-down"> 
 
    <nav class="headernav"> 
 
    <ul> 
 
     <li><a href="#">Gig</a></li> 
 
     <li><a href="#">ity</a></li> 
 
     <li><a href="#">element</a></li> 
 
    </ul> 
 
    </nav> 
 
</header>

來源

2017-05-14 01:21:21 rafaelfndev

你要麼需要添加position: relative到nav和position: absolute到nav ul（獲得top: 50%; transform: translate(0,-50%);工作），或者你也可以只使用display: flex; align-items: center上nav。我只會使用flexbox。

header { 
 
    height: 80px; 
 
    position: fixed; 
 
    top: 0; 
 
    transition: top 0.2s ease-in-out; 
 
    width: 100%; 
 
} 
 

 
footer { 
 
    background: #ddd; 
 
} 
 

 
* { 
 
    color: transparent 
 
} 
 

 
nav { 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: bisque; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
nav ul { 
 
    list-style: none; 
 
    text-align: center; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
nav ul li { 
 
    display: inline-block; 
 
    float: left; 
 
} 
 

 
nav ul li a { 
 
    display: block; 
 
    padding: 15px; 
 
    text-decoration: none; 
 
    color: #aaa; 
 
    font-weight: 800; 
 
    text-transform: uppercase; 
 
    margin: 0 10px; 
 
}

<header class="nav-down"> 
 
    <nav class="headernav"> 
 
    <ul> 
 
     <li><a href="#">Gig</a></li> 
 
     <li><a href="#">ity</a></li> 
 
     <li><a href="#">element</a></li> 
 
    </ul> 
 
    </nav> 
 
</header>

來源

2017-05-14 01:19:44

這似乎是你的代碼可能會簡單得多：

nav { 
 
    height: 80px; 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: center; /* horizontal alignment of child elements (optional) */ 
 
    background-color: bisque; 
 
} 
 

 
nav a { 
 
    text-decoration: none; 
 
    color: #aaa; 
 
    font-weight: 800; 
 
    text-transform: uppercase; 
 
    display: flex; 
 
    align-items: center;  /* vertical alignment of text */ 
 
    border: 1px dashed red; 
 
} 
 

 
a + a { 
 
    margin-left: 20px; 
 
}

<nav> 
 
    <a href="#">Gig</a> 
 
    <a href="#">ity</a> 
 
    <a href="#">element</a> 
 
</nav>

來源

2017-05-14 01:29:28

我在鏈接周圍添加了邊框來顯示可點擊區域，這是標題的整個高度。其他答案只是涵蓋了文字。不知道你想走哪條路。 –

在情況下，當你有塊的靜態的高度，所以能夠以中心沒有纏繞容器元件與垂直於中間對齊直列[ - 嵌段]元素。

.vertical-container { 
 
    height: 80px; 
 
    border: 1px solid black; 
 
    white-space: nowrap; 
 
    /* this prevents vertical block to "fall out" of container */ 
 
} 
 

 
.vertical-aligner { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    height: 100%; 
 
    width: 0; 
 
} 
 

 
.vertical-content { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    border: 1px solid red; 
 
    white-space: normal; 
 
    /* reset white-space for content */ 
 
}

<div class="vertical-container"><span class="vertical-aligner"></span><span class="vertical-content">Text that should be vertically middle of container</span></div>

我已經相應地更新你的提琴：https://jsfiddle.net/w3s8cj92/2/

附：我想提供更多的信息，但後來

來源

2017-05-14 01:57:41 emii

CSS更換

header { 
    height: 80px; 
    position: fixed; 
    top: 0; 
    transition: top 0.2s ease-in-out; 
    width: 100%; 
    display: table; 
} 

footer { background: #ddd;} 
* { color: transparent} 
nav { 
    height: 100%; 
    width: 100%; 
    background-color: bisque; 
} 
nav ul { 
    margin: 0; 
    padding: 0; 
    display: table-cell; 
    vertical-align: middle; 
    height: 80px; 
} 
nav ul li { 
    display: inline-block; 
    float: left; 
} 
nav ul li a { 
    display: block; 
    padding: 15px; 
    text-decoration: none; 
    color: #aaa; 
    font-weight: 800; 
    text-transform: uppercase; 
    margin: 0 10px; 
}

來源

2017-05-14 02:35:30

這裏改變標題CSS和導航UL的工作正常 –

在固定高度的容器中垂直居中元素

回答

相關問題