Html Can'；t垂直对齐表格单元格中的链接_Html_Css_Html Table

Html Can'；t垂直对齐表格单元格中的链接

html css

Html Can'；t垂直对齐表格单元格中的链接,html,css,html-table,Html,Css,Html Table,我的愿望很简单——制作一个具有最低高度要求（本例中为40像素）和垂直居中文本的可点击单元格（即带有链接的单元格）。以下是我到目前为止得出的结论： <html> <head> <style> table.test td { border:1px solid black; width: 200px; height: 100%;} table.test td.cell a { background-color: #FFF5EE; displa

我的愿望很简单——制作一个具有最低高度要求（本例中为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>


表1.1测试td{
边框：1px纯黑；
宽度：200px；
高度：100%；}
表1.1.1测试td单元a{
背景色：#FFF5EE；
显示：内联块；
高度：100%；宽度：100%；
最小高度：40px；}
表1.test td.cell a:悬停，td.cell a:激活{
背景色：#D2691E；}
第1行
第1行
第2行
第3行

一切正常，但无法使文本垂直对齐（居中）：

vertical align

属性在这种情况下不起作用

下面是操作（）中的示例。

尝试使用以下css将文本居中并垂直对齐：

  table.test td { 
  text-align:center;
  vertical-align:middle
  }

使用垂直对齐：

试试这个：

.cell {
    line-height: 4em;
}

用于水平对齐

.cell {
    line-height: 4em;
    text-align: center;
}

好的，我做了很多修改，包括了jquery，但我认为这正是您想要的

现在我们开始：

<html>
<head>
//Really important, put this if you want the jquery to work
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<style>

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

.cell 
{background-color: #FFF5EE; 
cursor:pointer;}

.hover
{background-color: #D2691E;}


</style>
<script>
    $(document).ready(function() {
            //Replace your link and redirect when you click on the cell
        $(".cell").click(function() { window.location = 'http:\www.google.lt'});
            //Since you can't put a hover class on a td, you have to do it in jquery
        $(".cell").hover(function() { $(this).addClass("hover");}, function() {$(this).removeClass("hover");});

    });
</script>


</head>
<body>

<table class="test">
<tr>
<td class="cell">Google</td>
<td>Line1</td>
</tr>
<tr>
<td class="cell">Google</td>
<td>Line1<br>Line2<br>Line3</td>
</tr>
</table>

</table>
</body>


//非常重要的一点是，如果希望jquery工作，请使用此选项
表1.1测试td
{边框：1px纯黑；
宽度：200px；
高度：40px；}
.细胞
{背景色：#FFF5EE；
游标：指针；}
悬停
{背景色：#D2691E；}
$（文档）.ready（函数（）{
//单击单元格时替换链接并重定向
$（“.cell”）。单击（函数（）{window.location='http:\www.google.lt'}）；
//因为不能在td上放置hover类，所以必须在jquery中进行
$（.cell”）.hover（function（）{$（this.addClass（“hover”）；}，function（）{$（this.removeClass（“hover”）；}）；
});
谷歌
第1行
谷歌
第1行
第2行
第3行

我将最小高度作为td样式中的高度

我知道这是一个很大的变化，但它的工作：）

这是小提琴：

编辑：

我已经更新了小提琴：这样你就可以有多个链接删除这行了

height: 100%;

从

加

vertical-align: middle;

到

如果有帮助，我会这样做，并将链接切换到javascript onclick：

.tdmenu 
{
    vertical-align : middle;
    padding-left : 10px;
    padding-right : 10px;
}
.tdmenu:hover
{
    background-color : rgb(220,220,220); /*set color to whatever you like*/
    cursor : pointer;
}

还有我的HTML

<table cellpadding="2" cellspacing="0" style="height : 40px; background-color : rgb(255,255,255);">
<tr style="height : 100%;">
    <td class="tdmenu" onclick="document.location='Default.aspx';">Home</td>
    <td class="tdmenu" onclick="document.location='Projects.aspx';">Projects</td>
</tr>
</table>


家
项目

似乎玩得不错。

我也遇到过类似的情况，花了好几个小时才弄清楚。此方法将允许您垂直对齐并居中。替换你的

<a href="http://www.linkhere.com"></a>

用这个编码

<div style="display:table;width:100%;height:100%;">
    <a href="http://www.linkhere.com" style="display:table-row;">
        <div style="display:table-cell;vertical-align:middle;align-text:center;">
            Link contents go here
        </div>
    </a>
</div>

当然，将链接的内容放在div表单元格中。这也会将链接拉伸到用于此代码的容器的边缘。希望有帮助。

它确实是水平对齐，但不是垂直对齐。@Mike这比我想象的更困难，Pheonix在将行高度设置为4em时的答案是好的，但是如果表格单元格的高度增加，它仍然无法填充剩余的高度，我会把这个问题标记为我最喜欢的问题，看看你的结果是什么，祝你好运我也认为这是一个简单的问题，直到几个小时的搜索/尝试/错误没有给出任何结果：）做到了。但同样-我需要一个可点击的单元格（即，可以通过按下单元格空间中的任意位置来转到链接），文本垂直对齐。在您的示例中，只有文本是可单击的。@Greg yes您是对的。。。如果右列中的行增加，那么这似乎不起作用，那么我们还需要增加

行高度

。。。所以这不是一个理想的解决方案。但我无法以其他方式实现这一点：-/谢谢你的努力。它确实有效，但非常奇怪的是，相当简单的问题必须求助于使用JS:/我仍然希望有一个基于CSS的解决方案，因为在我的例子中，有十几个单元格中有不同的链接。我希望你能找到它，但我认为这是最简单的解决方案，这在每个浏览器中都会起作用…多链接问题在新的fiddle中得到了修复，因此它只是JS问题，但我相信它在其他情况下会派上用场，直到没有运气为止。决定为第二个单元格中有多行的情况创建一个特殊类（具有预定义的单元格高度）。

<a href="http://www.linkhere.com"></a>

<div style="display:table;width:100%;height:100%;">
    <a href="http://www.linkhere.com" style="display:table-row;">
        <div style="display:table-cell;vertical-align:middle;align-text:center;">
            Link contents go here
        </div>
    </a>
</div>