我的top-nav想要实现垂直居中应该怎么做呢？就现在的代码我是通过计算header的高度然后设置的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul li{
list-style-type: none;
}
.ensemble {
margin: 0 auto;
}
.header{
background-color: lightblue;
overflow: hidden;
}
.header .logo{
float: left;
line-height: 50%;
}
.header .nav .top-nav{
position: relative;
top: 22px;
overflow: hidden;
}
.header .nav .top-nav li{
float: right;
font-size: 30px;
font-family: "黑体";
margin-right: 20px;
}
</style>
</head>
<body>
<div class="ensemble">
<div class="header">
<div class="logo"><img src="images/logo.png" alt="" srcset=""></div>
<div class="nav">
<ul class="top-nav">
<li>校园导航</li>
<li>校园地图</li>
<li>校园资讯</li>
<li>校园文化</li>
<li>校园地带</li>
</ul>
</div>
</div>
<div class="main">
<div class="left">
<h3>課程推薦</h3>
<ul class="cur">
<li><span>職業路徑</span> HTML5与CSS3实现网页动态</li>
<li><span>職業路徑</span> 零基础入门Android语法与界面</li>
<li><span>職業路徑</span> IOS基础语法与常用控件</li>
<li><span>職業路徑</span> php入门开发</li>
<li><span>職業路徑</span> java入门开发</li>
</ul>
</div>
<div class="min">
<h3>相关课程</h3>
<ul class="link-cur">
<li>html css javascript</li>
<li>html css3 jquery</li>
<li>移动网路基础 移动端APP开发</li>
</ul>
</div>
<div class="right">
<h3>登录</h3>
<ul class="login">
<li><input type="text"></li>
<li><input type="password" name="" id=""></li>
<li><input type="submit" value="登录"></li>
</ul>
</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
吴周超2回答
-
Geek丶
使用flex布局 -
yuanfengjituan
问题没看懂、、不好意思 ，问问题 要简单，整一堆没用的代码没人愿意看，两个div就能描述的问题
随时随地看视频慕课网APP
Html/CSS