求inline-block水平居中按钮的css完美版
请问我下面的代码是不是最完美了?无论在什么浏览器都会水平居中?
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>button middle</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <style type="text/css"> *{margin:0;padding:0} .mgl20{margin-left:20px;} .btns_line{ background-color:tan; margin:20px; padding:30px; border:1px solid gray; text-align:center; word-spacing:-6px; } .btn { display:inline-block; padding-left: 15px; background-position: left top; text-align: center; background-repeat: no-repeat; color: #FFFFFF; font-size: 20px; font-weight: bold; cursor: pointer; word-spacing: 0; background-image:url(btn_gray_left.png); width:150px; height:34px; line-height:34px; } .btn span { padding-right: 15px; display: block; height: 100%; background-position: right top; background-repeat: no-repeat; width: auto; cursor: pointer; background-image:url(btn_gray_right.png); } </style> <div class="btns_line"> <a href="#" class="btn"><span>hello world</span></a> <a href="#" class="btn mgl20"><span>hello world</span></a> </div> </body> </html>
------解决方案--------------------
呵呵。。这个我也早有做过。。学习了
按钮分页距中display:inline-block完美解决
http://www.ok22.org/art_detail.aspx?id=374