上下两行导航的时候定义css 才能上下对齐，首先我们需要给这个上下2个导航条设置一样的宽度和高度，然后在给导航条中的每个li设置一样的宽度和高度，和margin值，就能保持上下对齐了，通过代码来理解：
<html><head>
<style> //通过style实现
#nav{
width:900px
height:30px
}
#nav ul li{
float:left
width:60px //当宽度不够的时候自然就会往下走，然后也是对齐第一个排列的
}
</style>
<link rel='stylesheet' type='text/css' href='./css/index1.css'> //通过外部文件实现
</head>
<body>
<div class="nav" style="width:400px"> //通过行内实现
<ul>
<li>
<a href="">首页</a>
</li>
<li>
<a href="">兴趣爱好</a>
</li>
<li>
<a href="index.php">好友印象</a>
</li>
<li>
<a href="register.php">会员注册</a>
</li>
<li>
<a href="dengtu.php">会员登录</a>
</li>
</ul>
</div>
</body>
</html>
第一种方法：vertical-align：垂直对齐
middle 居中 top 上对齐 bottom 下对齐
第二种方法：
style{
height:20px
line-height:20px
}
1、 使用定位，左右拉取方法：
2、使用margin：auto，方法:
1、使用位移方法，兼容性较低，移动端慎用
2、组合使用display:table-cell和vertical-align、text-align，使父元素内的所有行内元素水平垂直居中（内部div设置display:inline-block即可）。
3、用弹性布局实现垂直左右居中
第一步:在img标签后面添加一个span元素
第二步:为这几个元素设置样式
1.把#div1元素设置text-align:center
2.把添加的元素span转化为行内块元素(display:inline-block)，并且设置vertical-align:middle
3.为img元素设置vertical-align:middle。
完成以上操作之后，这个Img元素在#div1中就是垂直居中的了，这种方法的兼容性等比较好，唯一的缺点可能就是要在元素后面添加一个元素
(注意：这个元素最好是span元素，如果是div元素的话，在低版本ie下有兼容问题)
这种方法利用了css3的新特性
为#div1设置display:flexvertical-align:middlealign-items:middle。
这种方法的缺点就是只要不支持css3的浏览器，那就不会起作用了。
