CSS text positioning in table row

Question

I have little problem positioning text in the middle of table row.

enter image description here

Each table row contains three <td> elements. I want to position text in the middle of the cell. Now 'Name' text where 'Description' is longer is in top. I tired

td {
  vertical-align: middle;
}

but that doesn't work. How to correctly position text?

UPDATE
This worked fine:

.table tbody>tr>td.vert-align{
    vertical-align: middle;
}

This question might help: http://stackoverflow.com/questions/13771101/centering-a-button-vertically-in-table-cell-using-twitter-bootstrap — AR_HZ, Jul 20 '15 at 20:33
This is the correct css property to touch. Try to use browser debugger to see if the css is applied (it may be override by other properties). — D_S_toowhite, Jul 20 '15 at 20:37

score 2 · Accepted Answer · edited Jul 21 '15 at 03:12

2

Another great option that I find the most compliant is using the line-height property to vertically align/center single line text

td {
  line-height: 100px; /*play around with this value*/
}

edited Jul 21 '15 at 03:12

m4n0

29,823
27
76
89

answered Jul 21 '15 at 03:10

Chris

113
4

CSS text positioning in table row

1 Answers1