求inline-block水平居中按钮的css完美版
求inline-block水平居中按钮的css完美版
请问我下面的代码是不是最完美了？无论在什么浏览器都会水平居中？
<!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>