Блог

Главная - Вопросы по программированию - Как расположить текст по центру в div или ячейке таблицы, применив ссылку ко всей ячейке / div, где текст может составлять 1/2/3 строки

Как расположить текст по центру в div или ячейке таблицы, применив ссылку ко всей ячейке / div, где текст может составлять 1/2/3 строки

#css #hyperlink #vertical-alignment #html

#css #гиперссылка #выравнивание по вертикали #HTML

Вопрос:

Я пытаюсь создать кнопки либо из divs, либо из ячеек таблицы (или некоторой комбинации), где текст может быть переменной длины (и, следовательно, распечатываться с использованием 1, 2 или 3 строк), но ссылка должна при наведении курсора мыши превращать всю ячейку в другую ячейку, а ссылка должна применяться ко всей ячейке.

Я могу либо выровнять текст по центру, но применить ссылку / фон только к тексту, либо связать всю ячейку, но текст всплывает вверху.

Вот мой HTML / PHP: 

 <div id="rollover"><div class="container">
  <table><tr>
    <?php foreach ($field_landing_button_links as $btnlink) : ?>
      <td class="list" width="<?php echo $width;?>%"> 
        <a href ="<?php echo $btnlink['display_url'];?>">
         <div class="cell"><?php echo $btnlink['display_title'];?></div>
        </a>
      </td>
    <?php endforeach; ?>
  </tr></table>
</div></div>

И мои стили:

 
#rollover div.container {ширина: 549 пикселей;}
#rollover div.container td {выравнивание текста по центру; выравнивание по вертикали: по середине;}
#rollover div.container tr{ высота: 48 пикселей; фоновое изображение: url("../../images/div_bg.jpg ")}
#rollover div.container td a { курсор: указатель; дисплей: блок; цвет: # FFF; поле: 0; ширина: 100%;}
#rollover div.container td a:наведите курсор {цвет фона: красный; }

Приведенное выше правильное выравнивание текста по вертикали, но ссылка / цвет фона применяются только к тексту. Я бы хотел что-то, что работает хотя бы в IE7 / 8, FF 2/3, Chrome и Safari.

Заранее спасибо!

D

Ответ №1:

Вы можете установить line-height из <a> на всю высоту строки, чтобы выровнять текст по вертикали:

 #rollover div.container td a { height: 48px; line-height: 48px; }

Обратите внимание, что это работает, только если строка имеет фиксированную высоту (которой она кажется). В противном случае, я думаю, вам не повезло бы, и вам пришлось бы использовать hover и click события самого td.

Комментарии:

1. Ах, я пропустил часть «текст может состоять из 1/2/3 строк». Высота строки здесь не будет работать.

Ответ №2:

Существует несколько способов справиться с этим. Самый простой способ — использовать javascript. В частности, jQuery. Сделав это, вы могли бы полностью избавиться от таблицы. Установите ваши теги A в виде блока, задайте им ширину, переместите их, затем при загрузке страницы выполните итерацию по ним, чтобы найти самый высокий, затем выполните итерацию по ним во второй раз, добавив необходимые верхние и нижние отступы, чтобы визуально придать им одинаковую высоту.

Если вам не нужно заставлять это работать с IE, вы можете обойтись простым использованием CSS и свойств «отображать таблицу / table-cell», чтобы затем включить выравнивание по вертикали:по центру.

В прошлом я использовал их комбинацию, используя CSS для хороших браузеров и возвращаясь к решению JS для IE.