Question

我无法集中我的HTML按钮。

的jsfiddle： http://jsfiddle.net/huskydawgs/j1rpupgx/

HTML：

<div>
    <table cellspacing="0" cellpadding="0">
       <tbody>
          <tr>
             <td style="border-radius: 0px; background-color: #f66511; display:   block;" width="138" height="30" align="center" bgcolor="#2251a4"><a style="color: #ffffff; font-size: 15px; font-family: sans-serif; text-decoration: none; line-height: 30px; width: 100%; display: inline-block;" href="https://www.onvia.com/">Get Started</a></td>
         </tr>
       </tbody>
    </table>
 </div>

Answer 1

对于您的具体示例，您只需添加以下CSS：

table{margin:0 auto;}

这是一个完整的工作片段：

＆＃13;

table{margin:0 auto;}

＆＃13;

<div>
    <table cellspacing="0" cellpadding="0">
        <tbody>
            <tr>
                <td style="border-radius: 0px; background-color: #f66511; display: block;" width="138" height="30" align="center" bgcolor="#2251a4"><a style="color: #ffffff; font-size: 15px; font-family: sans-serif; text-decoration: none; line-height: 30px; width: 100%; display: inline-block;" href="https://www.onvia.com/">Get Started</a></td>
            </tr>
        </tbody>
    </table>
</div>

＆＃13;

Answer 2

＆＃13;

table {
    width: 100%;
}
.btn {
    text-align: center;
    border-radius: 0px;
    background-color: #f66511;
    display: block;
    color: #ffffff;
    font-size: 15px;
    font-family: sans-serif;
    text-decoration: none;
    line-height: 30px;         
    width: 138px;
    margin: 0 auto;
}

＆＃13;

<div>
    <table cellspacing="0" cellpadding="0">
        <tbody>
            <tr>
                <td> <a class="btn" href="https://www.onvia.com/">Get Started</a>

                </td>
            </tr>
        </tbody>
    </table>
</div>

＆＃13;

Answer 3

在打开div之前放置<center>并在结束div之后结束它，如下所示：

   <center>
        <div>
            <table cellspacing="0" cellpadding="0">
                <tbody>
                    <tr>
                        <td style="border-radius: 0px; background-color: #f66511; display: block;" width="138" height="30" align="center" bgcolor="#2251a4"><a style="color: #ffffff; font-size: 15px; font-family: sans-serif; text-decoration: none; line-height: 30px; width: 100%; display: inline-block;" href="https://www.onvia.com/">Get Started</a></td>
                    </tr>
                </tbody>
            </table>
       </div>
  </center>

我也为你做了一个JSFiddle： https://jsfiddle.net/k1krs98z

如何将此HTML按钮居中

3 个答案: