CSS居中总结
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ margin:0; padding:0; text-align: center; } .div1{ width:200px; height:200px; background-color: aquamarine; } .div2{ width:100px; height:100px; background-color:red; } .spcenter{ margin:0 auto; /*DIV居中*/ text-align: center; /*文本居中*/ } .div3{ width:400px; height:400px; background: url("noavatar_big.gif") center red no-repeat ; margin:0 auto; } .div4{ width:300px; height:300px; border: 1px solid red; line-height: 300px; margin:0 auto; } .div5{ width:900px; height:300px; border: 1px solid red; vertical-align: middle; line-height: 300px; margin:0 auto; } img{ vertical-align: middle; } ul{ list-style: none; display: inline-block; vertical-align: middle; } ul li{ float: left; padding:5px; } </style> </head> <body> <p>水平居中</p> <div class="div1 spcenter"> <div class="div2 spcenter"></div> </div> <hr/> <p>图片的垂直居中</p> <div class="div3"></div> <hr/> <p>针对文字短的文字的垂直居中</p> <div class="div4"> <span>这真的是文字的垂直居中</span> </div> <hr/> <p>文字与图片、按钮、导航的垂直居中</p> <div class="div5"> <span>图片与文字垂直居中</span> <input type="text"/> <img src="noavatar_big.gif" alt=""/> <ul> <li>qwe</li> <li>wer</li> <li>ert</li> </ul> </div> </body> </html>
代码运行如下