2

I am looking for the solution which will make elements within anchor vertically aligned to the middle.

Typically I have a name and the numeric value, both in the same table cell, which must be clickable as a whole. The name must be aligned to the left (floated), the numeric value to the right (text-align).

I am using this solution: http://jsbin.com/edecof where everything works just fine until the name is too long to fit on a single line. When it breaks to two or more lines, the numeric value stays vertically aligned to the top, because of the floated element overflows the anchor. Knowing that I am obviously facing the challenge to make anchor 100% height of table cell. Adding a clearfix element doesn't help, adding clearfix solution with before and after tables doesn't help either.

The expected result is to align the number in the middle too.

Any ideas?

Iceman
  • 25
  • 5
  • the expected result is to align the number in the middle too? – Fabrizio Calderan Jun 10 '13 at 08:42
  • Yeah, exactly. I am going to edit the question. – Iceman Jun 10 '13 at 08:44
  • Shouldn't the `188cm` be in a seperate cell? – Pete Jun 10 '13 at 08:52
  • @Pete Since it must be clickable as a whole, it cannot be in two separate cells. More than that, it wouldn't help at all, because the cell with the name would be higher than numeric value, which will be still vertically aligned to the top. – Iceman Jun 10 '13 at 08:54
  • @Iceman if this is tabular data then you should use the table correctly, otherwise why use a table at all. If you had two columns they would be side by side and then you could vertically align the column to the middle. Just add the link to both columns or use a javascript workaround so when the row is clicked you will be redirected to where the link wants to go – Pete Jun 10 '13 at 10:06
  • @Pete I'd love to do it as you're suggesting and I've done it before, yet it did not work as client needed. That's why I am walking this path. This demo is just a showcase, in reality, there are 2 or more table cells on a single row and you have to choose between them. Data needs to be on the left (name) and right (number) of the table cell. It could be designed as a th/td pattern, but you cannot make the border-spacing as you need, same with anchor 100% height, etc. Ergo, there is many problems to solve and this solution is easier and working. – Iceman Jun 11 '13 at 09:11

3 Answers3

2

Here is the WORKING SOLUTION for the issue that needs to be vertically aligned.

The HTML:

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

The 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;}

The Logic:

To add vertical alignment to the issue in question i.e 188cms, you need to either create it in a separate table-cell or if you do not want to create it separately, you need to add a tag within which it should co-exist. In this case, you need to wrap it between the span tag.

Hope this helps.

Nitesh
  • 15,425
  • 4
  • 48
  • 60
  • That makes anchor indeed 100% height, although the numeric value is still vertically aligned to the top. – Iceman Jun 10 '13 at 08:52
  • Unfortunately `display:inline-block` isn't supported in a bunch of older browsers (*cough* IE *cough*) so you may need to take that into consideration... – Ben Jun 10 '13 at 08:54
  • @Steve - For his example, I have removed the `inline-block` for now. But for older IE, I suggest `hasLayout` may do the trick for `inline-block` declaration. http://www.satzansatz.de/cssd/onhavinglayout.html – Nitesh Jun 10 '13 at 09:07
  • Yeah, `inline-block` could work - I use it quite frequently. Just a design consideration, not trolling :) – Ben Jun 10 '13 at 09:09
  • Thank you, this might work, although I need to add some display-table.htc thingy, which I am already using on the project. – Iceman Jun 10 '13 at 09:43
  • 1
    @Iceman - welcome to SO. The community appreciates if you can accept an answer which best helped you solve your original question :) – Ben Jun 10 '13 at 23:59
  • @Steve Thanks, I'm evaluating proposed solutions and I am going back to mark the best answer as soon as possible :) – Iceman Jun 11 '13 at 09:12
  • @Steve None of the proposed solutions actually worked out. What should I do now? :) – Iceman Mar 26 '14 at 21:56
  • @Iceman - this was a year ago! Sorry but I'm too busy to dig into it at the moment. Good luck! – Ben Mar 26 '14 at 22:07
1

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;}
Gangadhar
  • 1,739
  • 15
  • 19
0

The key for this is usually the line-height property in CSS, combined with vertical-align:middle. (JS: .lineHeight, .verticalAlign)

line-height is measured in px, and should be equal to the height of the parent. You may need to set the element to display:block, but if it's floated I think it will work right away.

HTML DOM is notorious for struggling with 100% height; most (all?) solutions fail without an explicit pixel height on a parent.

Javascript can be used after the page is rendered to match a child's .lineHeight to its parentNode.offsetHeight, perhaps, but in general styling a page with Javascript is less elegant than using CSS.

EDIT

To further elaborate on the JS solution then, something like this can get you started:

var element = document.getElementById('yourelement');
var h = element.parentNode.offsetHeight + 'px';
element.style.height = h;
element.style.lineHeight = h;
Community
  • 1
  • 1
Ben
  • 54,723
  • 49
  • 178
  • 224