HTML 按钮对齐答案

【问题标题】：HTML Button AlignmentHTML 按钮对齐
【发布时间】：2014-10-13 05:37:02
【问题描述】：

如何在页面的中间/中心并排对齐我的大 HTML 按钮？

    <table cellspacing="0" cellpadding="0"> <tr> 
<td align="center" width="300" height="40" bgcolor="#0000" style="-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 99px; color: #ffffff; display: block;">
<a href="http://someurl.com" style="font-size:16px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height:400px; width:100%; display:inline-block"><span style="color: #FFFFFF">Recruiters, Click Here!</span></a>
</td> 
</tr> </table><table cellspacing="0" cellpadding="0"> <tr> 
<td align="center" width="300" height="40" bgcolor="#000091" style="-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius:99px; color: #ffffff; display: block;">
<a href="http://someurl.com" style="font-size:16px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height:400px; width:100%; display:inline-block"><span style="color: #FFFFFF">Job Seekers, Click Here!</span></a>
</td> 
</tr> </table>

【问题讨论】：

首先，您是否考虑过分配一个类，然后使用外部 CSS，而不是像您那样将所有内容都内联？很难阅读
HTML5 - HTML 元素中的属性，例如 height、width 和 bgcolour 已被弃用，不应使用。基本上，如果它可以通过样式应用，它不应该在 HTML 中。 tables 也用于表格数据，而不是布局。
您要水平居中、垂直居中还是两者兼而有之？

标签： html alignment

【解决方案1】：

CSS 和更少的 HTML：

HTML：

<div class="bigButtons">
    <a href="http://someurl.com" >Recruiters, Click Here!</a>
    <a href="http://someurl.com" class="blueOne" >Job Seekers, Click Here!</a>
</div>

CSS

.bigButtons
{
    /*Use the div container to horizontally center the buttons*/
    /*this will also center the text in the buttons*/
    text-align:center;
}

.bigButtons a
{
    /* Set basic button styles*/
    font-size:16px; 
    font-weight: bold; 
    font-family: Helvetica, Arial, sans-serif; 
    text-decoration: none; 
    width:300px;
    /* Change below to display:block; 
      if you want buttons to be on different lines/rows */
    display:inline-block; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px;
    border-radius: 99px; 
    color: #ffffff; 
    background-color:#000;
    height:40px;
    line-height:40px; /*Vertically centers text in button*/
}

a.blueOne 
{
    /*Give the blue button its background*/
    background-color: #000091;
}

Demo

【讨论】：