Высота 100% для якоря, содержащего плавающий элемент в ячейке ячейки

Question

Я ищу решение, которое сделает элементы в анкерах вертикально выровненными к середине.

Как правило, у меня есть имя и числовое значение, как в одной и той же ячейке таблицы, которые необходимо кликать в целом. Имя должно быть выровнено влево (плавающее), цифровое значение вправо (выравнивание текста).

Я использую это решение:http://jsbin.com/edecof где все работает нормально, пока имя слишком длинное, чтобы поместиться на одной линии. Когда он разбивается на две или более строк, числовое значение остается вертикально выровненным вверх, из-за того, что перемещаемый элемент переполняет привязку. Зная, что я, очевидно, сталкиваюсь с проблемой создания якорной 100% высоты ячейки таблицы. Добавление элемента clearfix не помогает, добавление решения clearfix с таблицами до и после не помогает.

Ожидаемый результат - выровнять число в середине.

Любые идеи?

Answer 1

Вот WORKING SOLUTION для вопроса, который должен быть вертикально выровнены.

HTML-:

<table> 
    <tr><td><a href="#"><strong>A man without a name</strong><span>188 cm</span></a></td></tr> 
</table> 

CSS-:

td {border: 1px solid #000; width: 150px; text-align: right; border-collapse: collapse;} 
    td a {display: table-row; text-decoration: none; color: #333; background: #f90; vertical-align:middle;} 
    td a strong {width: 60%; display: table-cell; text-align: left;} 
td a span{display: table-cell; 
    vertical-align: middle;} 

Логика:

Чтобы добавить вертикальное выравнивание по рассматриваемому вопросу т.е. 188cms, что вам нужно либо создать его в отдельном table-cell, либо если вы не хотите его создавать отдельно , вам необходимо добавить tag, в котором он должен сосуществовать. В этом случае вам нужно обернуть его между тегом span.

Надеюсь, это поможет.

Answer 2

Ключом для этого является, как правило, свойство line-height в CSS, в сочетании с vertical-align:middle. (JS: .lineHeight, .verticalAlign)

line-height измеряется в px и должно быть равно высоте родителя. Вам может потребоваться установить элемент в display:block, но если это float ed, я думаю, он будет работать сразу.

---

HTML DOM известен как struggling with 100% height; большинство (все?) решений терпят неудачу без явной высоты пикселя для родителя.

Javascript может быть использован после того, как страница будет отображаться в соответствии с .lineHeight ребенка его parentNode.offsetHeight, возможно, но в целом дизайн страницы с Javascript менее изящный, чем использование CSS.

---

EDIT

Для дальнейшей разработки на решение JS то, что-то вроде этого вы можете получить начала:

var element = document.getElementById('yourelement'); 
var h = element.parentNode.offsetHeight + 'px'; 
element.style.height = h; 
element.style.lineHeight = h; 

Answer 3

HTML:

<table> 
    <tr><td><a href="#" > 
    <table ><tr><td>A man without Name</td> 
    <td>188 cm</td><tr></table>  
    </a></td></tr> 
    </table> 

CSS

td { width: 150px; text-align: right;} 
    td a {display: block; text-decoration: none; color: #333; background: #f90; border:solid 1px; } 

a td{text-align:left;padding-right:5px;}