對齊3個div水平居中並可鏈接？

我已經花了幾個小時了，我認爲這樣做更簡單..我試圖讓3個div水平居中，同時保持它們完全可鏈接，並且我最終放棄了這個並嘗試了表（： -o）對齊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或表做到這一點，您的答覆非常感謝！

謝謝！

來源

2012-10-06 unicornication

你可以閱讀我的這個答案作爲參考http://stackoverflow.com/questions/12757135/how-to-vertically-center-a-web-page/12757198#12757198 –

根本不需要使用table。這裏的關鍵是display: inline-block;。在這裏看到它的行動：little link。 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*/ 
}

來源

2012-10-06 12:25:52 Chris

你真的需要'高度'和'寬度'''顯示：塊'''''？是否因爲父級的「內聯塊」？ – Giona

@GionaF Nope，這不是那件事。他希望整個'div'完全可以點擊。通常'height'和'width'在'a's上不起作用，因爲它們默認是'inline'。 – Chris

是的，但是用'display：block'它們應該適合整個空間，不是嗎？ – Giona

你的意思是這樣嗎？

Demo

HTML：

<div id="wrapper"> 
<div><a href="#">a</a></div> 
<div><a href="#">b</a></div> 
<div><a href="#">c</a></div> 
</div>

CSS：

#wrapper, #wrapper * { 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    box-sizing:border-box; 
} 
#wrapper { 
    margin:0 auto; 
    width:1020px; /* width of divs + margin */ 
} 
#wrapper > div { 
    float:left; 
    width:300px; 
    height: 200px; 
    text-align:center; 
    margin:20px; 
    border: 2px solid #000; 
    line-height:140px; /* optional, will center the text vertically */ 
    background-color: #000; 
    opacity: 0.7; 
    font-size: 30px; 
    font-family: 'calibri'; 
    padding: 30px; 
} 
#wrapper > div a { 
    display:block; 
    color: #fff; 
}

編輯：更新了您的造型

來源

2012-10-06 12:20:25 Giona

謝謝@GionaF！這是一個非常聰明的解決方案。 :-) – unicornication

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

你讓所有td小號div襯裏。

來源

2012-12-27 10:33:28

對齊3個div水平居中並可鏈接？

回答

相關問題