Невозможно вертикально выровнять ссылку в ячейке таблицы - PullRequest
6 голосов
/ 29 октября 2011

Мое желание простое - создать кликабельную ячейку (т.е. ячейку со ссылкой) с минимальным требованием к высоте (в данном случае 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 в этом случае не работает.

Вот пример в действии ( ссылка ).

Ответы [ 7 ]

1 голос
/ 22 марта 2013

Удалить строку

height: 100%; 

от

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

и добавьте

vertical-align: middle;

до

table.test td { ... }
0 голосов
/ 16 ноября 2018

У меня была похожая ситуация, и мне понадобилось много часов, чтобы понять.Этот метод позволит вам выровнять по центру и по вертикали.Замените ваш код

<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.Это растянет ссылку также на края контейнера, который вы используете для этого кода.Надеюсь, это поможет.

0 голосов
/ 23 августа 2013

, только если это поможет, я сделал это и переключил ссылку на 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>

Кажется, хорошо играть.

0 голосов
/ 29 октября 2011

Хорошо, я сделал много изменений и включил 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>

И япоместите min-height как высоту в стиле td

Я знаю, что это много изменений, но это работает:)

А вот скрипка: http://jsfiddle.net/d9CGX/

РЕДАКТИРОВАТЬ:

Я обновил скрипку: http://jsfiddle.net/d9CGX/2/ Так что вы можете иметь несколько ссылок

0 голосов
/ 29 октября 2011

Попробуйте это ::

.cell {
    line-height: 4em;
}

и для горизонтального выравнивания

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

http://jsfiddle.net/HA6Wq/1/

0 голосов
/ 29 октября 2011

использовать выравнивание по вертикали:

http://jsfiddle.net/pN4pQ/1/

0 голосов
/ 29 октября 2011

Попробуйте следующий CSS для центрирования и выравнивания текста по вертикали:

  table.test td { 
  text-align:center;
  vertical-align:middle
  }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...