css vertical alignment, but not quite

Question

How do I have a block of text be aligned such that the top of the first line is 50% down from the top of the td?

So imagine this, but the top of first row is exactly 50% down.

--------------
|             |       
|             | 
|             |
|     xxxx    |
|   xxxxxxxx  |
|  xxxxxxxxxx |
|             |
|             |
--------------

I can do it with a containing div and padding, but I want pure css option that won't break if I change the table height, line height, etc....

Edit --

here is a fiddle that display correctly but uses "hack" css that will break if I change the height and whatnot.

http://jsfiddle.net/5q9K8/

It is showing correctly, but I don't want to have that div. I also don't understand why the padding-top needs to be 90%; would have thought 50% would do it.

Something like this? [**DEMO HERE**](http://jsfiddle.net/Ruddy/5q9K8/5/) — Ruddy, Apr 17 '14 at 14:43
close, but in that case the td with the single line should be vertical align middle, and the first line of the other td should line up with it. — hvgotcodes, Apr 17 '14 at 14:45

Imran Bughio · Answer 1 · 2014-04-17T15:16:54.417

1

Check this fiddle: http://jsfiddle.net/5q9K8/10/

HTML:

<table>
    <tr>
        <td>
            xxxx<br/>
            xxxxxx<br/>
            xxxxxxx
        </td>
        <td>
            xxxx
        </td>
    </tr>
</table>

Css:

td {
    height: 200px;
    border: 1px solid black;
    width: 100px;
    text-align: center;

    vertical-align:top;    
}
td:before{
    background: none repeat scroll 0 0 transparent;
    content: "";
    display: block;
    height: 50%;
}

Logic: Using before element to occupy 50% of the TD space so that text starts exactly from the middle & adding vertical align top to keep the text align top from center.

edited Apr 17 '14 at 15:16

answered Apr 17 '14 at 14:41

Imran Bughio

4,811
2
30
53

@fiction really? so what if I change the `width` to `200px` (which is equal to the `height`) http://jsfiddle.net/viphalongpro/5q9K8/6/ – King King Apr 17 '14 at 14:44
Great i could help, border-box means the padding will be counted as a part of height, which means the total sum of height will be 200px in this case even after applying 50% padding. – Imran Bughio Apr 17 '14 at 14:46
the td with the single line should appear as if vertical align is middle and the td with multiple lines should have its first line line up with the single line. In your example the text is too low – hvgotcodes Apr 17 '14 at 14:48
@KingKing I guess the % padding is acting werid ... if you change the 50% to 100px it will work fine even with Width 200px. http://jsfiddle.net/5q9K8/8/ – Imran Bughio Apr 17 '14 at 14:49
Yeah i don't get why 50% padding is resulting in it being aligned to the bottom when the width is 200px – fiction Apr 17 '14 at 14:58
@fiction I just noted that 50% is not the 50% of TD but something else... after increasing the height of TD the % remained the same... weird... – Imran Bughio Apr 17 '14 at 15:00
it seems css padding percentages are calculated from the width – fiction Apr 17 '14 at 15:01
nice, works if you change width/height and font size now – fiction Apr 17 '14 at 15:21
Hey i just ran in to the width % being used for height % issue and this is what i found http://stackoverflow.com/questions/10629294/css-fluid-layout-margin-top-based-on-percentage-grows-when-container-width-incr do check it out :) – Imran Bughio Apr 22 '14 at 06:45

score -1 · Answer 2 · answered Apr 17 '14 at 14:23

-1

Change the margin of the block. Use margin-top:50%;
Or try a vertica-align:center;
That would align it to the middle, i suppose that's why you want those 50%

answered Apr 17 '14 at 14:23

Heatmanofurioso

968
7
19

@hvgotcodes it works in your fiddle if you remove `height:100%` from `.x` – fiction Apr 17 '14 at 14:27
close, but the top rows are not aligned if I do that. – hvgotcodes Apr 17 '14 at 14:29
could you edit some fiddle? I doubt that this solution can't work for different pairs of **height** and **width** of the `td` element. BTW, what kind of `vertical-align:center`? – King King Apr 17 '14 at 14:30
it breaks if you change the font size. using margin-top: 50% puts the top of the div at the middle of the container, and since the text is in the div, its *below* the middle point of the container – hvgotcodes Apr 17 '14 at 14:34
See [This link](http://stackoverflow.com/questions/9249359/text-vertical-align-in-a-div) – Heatmanofurioso Apr 17 '14 at 14:36

css vertical alignment, but not quite

2 Answers2