1.效果
2.程序
行内元素与行内块元素，都可以当成文本进行处理，所以才有居中对齐。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 .nav { 8 text-align: center; 9 } 10 a { 11 width: 170px; 12 height: 70px; 13 color: #fff; 14 display: inline-block; 15 background-image: url(image/0303.png); 16 text-align: center; /*文字居中对齐*/ 17 text-decoration: none; 18 line-height: 70px;/*行高等你盒子的高度，则单行文本垂直居中*/ 19 } 20 .nav a:hover { 21 background-image: url(image/0354.png); 22 } 23 24 </style> 25 </head> 26 <body> 27 <div class="nav"> 28 <a href="#">网站导航</a> 29 <a href="#">网站导航</a> 30 <a href="#">网站导航</a> 31 <a href="#">网站导航</a> 32 <a href="#">网站导航</a> 33 <a href="#">网站导航</a> 34 </div> 35 </body> 36 </html>
3.a标签
可以放块级元素
不能在里面放a标签
4.文字块级标签
h1，p
里面不能再放其他块元素