答案 0 :(得分: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>
答案 1 :(得分: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>
答案 2 :(得分: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;
}