居中已经成功了，但是上下的距离控制不了了，老师，怎么办？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两行三列的运用</title>
<style type="text/css">
body {
margin: 0;
}
.header {
background-image: url(http://img1.sycdn.imooc.com/climg//59093e9c00016ce303000100.png);
background-repeat: no-repeat;
background-position: 0,0;
text-align: right;
height: 100px;
background-color: black;
font-size: 20px;
line-height: 100px;
}
.header a{
margin:30px;
text-decoration: none;
color: white;
}
.header a:hover{
color: red;
}
.header a:visit{
color: gray;
}
.kechengtuijian span{
background-color: lightcoral;
}
.kechengtuijian,.xiangguankecheng{
float: left;
background-color: lightblue;
height: 565px;
width: 32%;
text-align: center;
}
.tab{
margin: 0 auto;
}
.middle{
float: left;
background-color: orange;
height:565px;
width: 0.5%;
}
.middle-right{
float: right;
background-color: lightblue;
height: 565px;
width: 35.5%;
}
.middle-right form{
margin-top: 15%;
text-align: center;
border: 1 solid;
}
.middle-right form h1{
margin-right: 50%;
}
.middle-right form input{
width: 330px;
height: 40px;
margin: 5px;
border: none;
}
.middle-right form .button{
background-color: red;
color: white;
font-size:15px;
font-family: "微软雅黑";
}
.footer{
clear: both;
background-color: black;
height: 100px;
text-align: center;
}
.footer a{
color: white;
text-decoration: none;
margin: 25px;
line-height: 100px;
}
</style>
</head>
<body>
<div class="header">
<a href="">课程</a>
<a href="">职业路径</a>
<a href="">实战</a>
<a href="">猿问</a>
<a href="">手记</a>
</div>
<div class="kechengtuijian">
<table class="tab">
<tr>
<h1>课程推荐</h1>
<td><span>职业路径</span></td>
<td>HTML5与CSS3实现动态网页</td>
</tr>
<tr>
<td><span>职业路径</span></td>
<td>零基础入门Android语法与界面</td>
</tr>
<tr>
<td><span>职业路径</span></td>
<td>iOS基础语法与常用控件</td>
</tr>
<tr>
<td><span>职业路径</span></td>
<td>PHP入门开发</td>
</tr>
<tr>
<td><span>职业路径</span></td>
<td>JAVA入门开发</td>
</tr>
</table>
</div>
<div class="xiangguankecheng">
<table class="tab">
<tr>
<h1>相关课程</h1>
<td>HTML</td>
<td>CSS</td>
<td>JavaScript</td>
</tr>
<tr>
<td>HTML5</td>
<td>CSS3</td>
<td>Jquery</td>
</tr>
<tr>
<td>移动端基础</td>
<td>移动端APP开发</td>
</tr>
</table>
</div>
<div class="middle">
</div>
<div class="middle-right">
<form>
<h1>登录</h1>
<input type="text" name="用户名" placeholder="请输入邮箱/手机号">
<br/>
<input type="password" name="密码" placeholder="6-16位密码、区分大小写，不能用空格">
<br/>
<input type="button" name="按钮" value="按钮" class="button">
</form>
</div>
<div class="footer">
<a href="">网站首页</a>
<a href="">企业合作</a>
<a href="">人才招聘</a>
<a href="">联系我们</a>
<a href="">常见问题</a>
<a href="">友情链接</a>
</div>
</body>
</html>
正在回答
您好，可以设置垂直居中，也可以使用margin-top或者padding-top设置距离导航栏的距离。下列代码为垂直居中的设置方式：
.kechengtuijian,.xiangguankecheng{
float: left;
background-color: lightblue;
height: 565px;
width: 32%;
text-align: center;
display: table;
}
.tab{
margin: 0 auto;
display: table-cell;
vertical-align: middle;
}祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 626 份
- 解答问题 4930 个
想要学好Web后端开发的中流砥柱语言，本阶段为你轻松铺就扎实的基础，从前端网页布局的搭建到后台PHP开发，助你从零基础到掌握主流开发语言。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星