Question

如何在页面的中间/中心并排对齐我的大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>

Answer 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

HTML按钮对齐

1 个答案: