如何相對於按鈕垂直居中導航欄標題
[英]How to vertically center navbar title relative to buttons
問題描述
我無法弄清楚如何垂直居中我的導航欄標題。
在下面的示例中（請參閱鏈接），我想降低“標題”，使其在粘性導航欄中垂直居中。
任何幫助將非常感激。
- 傑西
html, body { height: 100%; width: 100%; margin: 0; padding: 0; background: white; color: black; } button { margin: 0; padding: 0; background: none; border: 0; } button:focus { outline: 0; } nav { margin: 0; padding: 0; width: 100%; overflow: hidden; background-color: yellow; border-bottom: thin orange solid; text-align: center; } nav.stickyNav { position: fixed; top: 0; left: 0; } nav ul { list-style: none; margin: 0; padding: 0; width: 100%; } nav ul li { display: inline; } nav ul li h1 { display: inline; } nav ul li h1.navTitle { /* What goes here to vertically center the title? */ } nav ul li button { margin: 0; padding: 12px; } nav ul li button:focus { background-color: purple; } nav ul li button:active { background-color: green; } nav ul li button.navBtnLeft { float: left; } nav ul li button.navBtnRight { float: right; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/> <body> <!-- Navbar --> <nav class="stickyNav"> <ul> <!-- Left Button --> <li> <button class="navBtnLeft"><i class="fa fa-fw fa-2x fa-bars"></i></button> </li> <!-- Right Button --> <li> <button class="navBtnRight"><i class="fa fa-fw fa-2x fa-comment"></i></button> </li> <!-- Title --> <li> <h1 class="navTitle">Title</h1> </li> </ul> </nav> </body>
2 個解決方案
解決方案1
3 已采納 2016-09-12 23:49:54
.navTitle{
line-height: 50px;
}
編輯：
如果您不想硬編碼，可以使用表格單元格，這是我的意思的一個例子： https ： //jsfiddle.net/aw30L9bh/
解決方案2
0 2016-09-13 01:51:50
你可以設置導航顯示：table; 然后使用垂直到中間：
.stickyNav li
{
display:table-cell;
}
.titleClass
{
vertical-align:middle;
}
我沒有對此進行過測試，但在大多數情況下都應該可以使用。 除非您必須使用舊版瀏覽器進行大量兼容性測試。
然后你也可以像上面的回答那樣硬編碼。
如何將導航欄中的主標題垂直居中？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.