对齐3个div水平居中和可链接？

Question

我花了几个小时用这个,我认为这样做要简单得多..我试图将3个div水平居中,同时保持它们完全可链接,我终于放弃了它并尝试了表(: - )

第一个显示我尝试连接div的失败.

 <center><table>
    <tr>

    <td>
    <a href="http://google.com" style="display:block;height:100%;width:100%">
    <div>
    a
    </div>
    </a>
    </td>
    <td>b</td>
    <td>c</td>
    </tr>
    </table>

用CSS

tbody tr td{
width: 300px;
height: 200px;
border: 2px solid #000;
background-color: #000;
opacity: 0.7;
color: #fff;
font-size: 30px;
font-family: 'calibri'; //temporary
padding: 30px;
}
body center table
{
border-spacing: 20px;
margin-top: -90px;
}
tr td a{
height:150%;
width:150%;
}

如果有人知道如何使用div或表格做到这一点,我们非常感谢您的回复!

Answer 1

table根本不需要使用s.这里的关键是display: inline-block;.在这里看到它:小链接.HTML:

<div class = "onediv"><a href = "#">Glee is awesome!</a></div>
<div class = "onediv"><a href = "#">Glee is awesome!</a></div>
<div class = "onediv"><a href = "#">Glee is awesome!</a></div>?

CSS:

body { /*this should be whatever is containing your three divs*/
    text-align: center; /*center them*/
    white-space: nowrap; /*make sure they're all on the same line*/
}
.onediv {
    display: inline-block; /*magic*/
    height: 200px; /*or whatever you want*/
    width: 150px;
    /*make it look pretty*/
    background: rgb(0, 162, 232);
    color: white;
}
a {
    color: white;
    height: 100%; /*spans the whole div vertically*/
    width: 100%; /*and horizontally (not necessary, but can't hurt!)*/
    display: block; /*otherwise the height and width definitions won't work*/
}?