对齐表格中心和按钮中心的按钮

Question

我制作了一个包含按钮的桌子，我希望按钮位于桌子的中央。

问题是按钮不是在按钮的中心对齐，而是在按钮启动时对齐，所以按钮稍微向右，这是一个图像：

这是我的代码：

       <table  width="100%"  border="0px" style="background:transparent">
       <tr>
        <td height="305px">



      <%-- button---%>
       <div style="text-align:center;">
        <a href="#" class="btn"  >Conocer más</a>
        </div>
        </td>
        </tr>
        </table>

这是css。

.btn{
background-color:#44c767;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:17px;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 0px 0px #2f6627;
position: absolute;

}

我遇到的另一个问题是我无法在表格内垂直对齐。

Answer 1

您是否尝试过添加宽度值然后使用

margin: 0 auto;

在你的按钮css中。这应该只是将按钮移动到其父div的中心。希望这会有所帮助：）

Answer 2

以下是水平和垂直居中按钮的代码版本。我调整了一点风格，因为我不认为你需要一个绝对位置和一个按钮的显示块。但如果这与页面的其余部分混淆，我们仍然可以将按钮包装在另一个div中。让我知道。

通过将div的行高设置为与TD相同的高度来完成垂直对齐。

HTML code：

<table  width="100%"  border="1" style="background:transparent">
<tr>
    <td style="height:305px;">
        <div style="width:100%; text-align:center;line-height:305px;">
            <a href="#" class="btn">Conocer más</a>
        </div>
    </td>
</tr>
</table>

CSS代码：

.btn {
    background-color: #44c767;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #18ab29;
    cursor: pointer;
    color: #ffffff;
    font-family: arial;
    font-size: 17px;
    padding: 16px 31px;
    text-decoration: none;
    text-shadow: 0px 0px 0px #2f6627;
}

如果您有时间尝试仅使用div转换该页面。我认为你可以在没有桌子的情况下轻松完成它。