2
A
回答
2
#header {
box-sizing: border-box;
background: #ffc301;
padding: 10px 15px;
display: table;
width: 100%;
height: 70px;
}
.logo {
background: #000;
text-align: center;
width: 70px;
color: #fff;
}
.logo,
.menu {
vertical-align: middle;
display: table-cell;
}
.menu ul {
text-align: right;
}
.menu ul li {
display: inline-block;
vertical-align: top;
}
<header id="header">
<div class="logo">Logo</div>
<nav class="menu">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</nav>
</header>
2
您可以使用flexbox
與justify-content
: center;
和align-items
: center;
性能得到它。
#header {
box-sizing: border-box;
background: grey;
padding: 10px 15px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 70px;
}
.logo {
background: black;
text-align: center;
width: 70px;
padding: 15px;
color: #fff;
}
.menu{
flex: 1;
text-align: right;
}
.menu ul li{
display: inline-block;
text-decoration: none;
}
a{
text-decoration: none;
}
<div id="header">
<div class="logo">logo</div>
<nav class="menu">
<ul>
<li><a href="#">item#1</a></li>
<li><a href="#">item#2</a></li>
<li><a href="#">item#3</a></li>
</ul>
</nav>
</div>
0
您可以使用 「display:inline-block的」 屬性,縮短你的代碼一樣簡單,如下..
HTML:
<header>
<div class="logo"><img src="logo.png" /></div><!--
--><nav class="menu">
<ul>
<li><a href="#">Item 1</a></li><!--
--><li><a href="#">Item 2</a></li><!--
--><li><a href="#">Item 3</a></li><!--
--><li><a href="#">Item 4</a></li>
</ul>
</nav>
</header>
CSS:
header{
background-color: grey;
box-sizing:border-box;
display:inlnie-block;
padding:10px 15px;
width:100%;
}
.logo,.menu{
display:inline-block;
font-size:0;
vertical-align:middle;
}
.logo{
text-align:left;
width:30%;
}
.logo img{
max-width:100%;
}
.menu{
text-align:right;
width:70%;
}
.menu ul li{
display:inline-block;
font-size:0;
vertical-align:middle;
}
.menu ul li a{
font-size:14px;
line-height:18px;
text-decoration:none;
}
相關問題
- 1. 垂直居中標題頁
- 2. 如何在導航菜單中垂直居中漢堡圖標?
- 3. 標題爲flexbox的垂直居中列
- 4. 垂直居中HTML標頭
- 5. 如何在CSS中垂直和水平居中標題?
- 6. 在UINavigationBar中垂直居中標籤TitleView
- 7. 垂直居中引導下拉菜單圖標
- 8. 標籤中的垂直居中文本
- 9. 居中菜單的標題wpf
- 10. 垂直快捷菜單欄文本不會垂直居中
- 11. jcarousel如何垂直居中項目
- 12. Bootstrap 4 - 垂直居中列表項目
- 13. JTable中的垂直標題?
- 14. 將圖像垂直居中在Flex項目中的錨標記內
- 15. 居中標誌(垂直/水平)
- 16. 垂直居中與固定高度標題中的CSS
- 17. 如何在div標籤中居中(垂直和水平)按鈕?
- 18. 在UWP文本框中垂直居中文本和光標
- 19. 如何在CSS中居中垂直對齊的菜單?
- 20. 在自定義主題的標題中居中菜單
- 21. 垂直標題標題
- 22. 在列表項中垂直居中textview
- 23. 垂直居中標籤和列表中的輸入
- 24. 垂直居中
- 25. 如何使標題垂直居中使用不同的標題長度?
- 26. Android應用的工具欄標題不是垂直居中
- 27. 對齊垂直居中圖像的標題左邊
- 28. 垂直居中使用CSS圖像右側的標題
- 29. 將搜索欄和按鈕垂直居中放置在標題中
- 30. 在圖像懸停上垂直居中和動畫圖標
以下是對我有用的相關問題:http://stackoverflow.com/questions/22429003/right-aligning-flex-item – JoeRocc