gpt4 book ai didi

html - 无法垂直对齐表格单元格中的链接

转载 作者:太空狗 更新时间:2023-10-29 15:17:52 24 4
gpt4 key购买 nike

我的愿望很简单 - 制作一个可点击的单元格(即带有链接的单元格),具有最小高度要求(在本例中为 40 像素)和垂直居中的文本。这是我到目前为止的想法:

<html>
<head>
<style>

table.test td {
border:1px solid black;
width: 200px;
height: 100%;}

table.test td.cell a {
background-color: #FFF5EE;
display:inline-block;
height:100%; width:100%;
min-height: 40px;}

table.test td.cell a:hover, td.cell a:active {
background-color: #D2691E;}

</style>
</head>
<body>

<table class="test">
<tr>
<td class="cell"><a href="www.google.lt">Google</a></td>
<td>Line1</td>
</tr>
<tr>
<td class="cell"><a href="www.google.lt">Google</a></td>
<td>Line1<br>Line2<br>Line3</td>
</tr>
</table>

</table>
</body>
</html>

一切正常,但我无法使文本垂直对齐(居中):/vertical-align 属性在这种情况下不起作用。

这是实际的例子 ( link )。

最佳答案

删除行

height: 100%; 

来自

table.test td.cell a { ... }

并添加

vertical-align: middle;

table.test td { ... }

关于html - 无法垂直对齐表格单元格中的链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7939148/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com