vertical alignment, almost there

Question

vertical alignment, almost there

Is there a way to align a block of text so that the top of the first line is positioned 50% down from the top of the td element?

Imagine this scenario, where the top of the first row is exactly at the 50% mark.

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

I can achieve this using a containing div and padding, but I'm looking for a pure CSS solution that won't break if I modify the table height, line height, etc...

Edit --

Here's a fiddle that displays correctly, although it uses "hack" CSS that may break if adjustments are made to the height and other factors.

http://jsfiddle.net/5q9K8/

It's currently displaying correctly, but I prefer not to use that extra div. Additionally, I'm unclear as to why the padding-top needs to be set to 90%; one would assume that 50% should suffice.

html css

Answer 1

Answer №1

Take a look at this demo: http://jsfiddle.net/5q9K8/10/

Here is the HTML code:

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

And here is the CSS code:

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

The concept behind this is using the before element to take up 50% of the TD space so that text is perfectly centered vertically, and adding vertical align top to keep the text aligned with the top of the center.

Answer 2

Take a look at this demo: http://jsfiddle.net/5q9K8/10/

Here is the HTML code:

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

And here is the CSS code:

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

The concept behind this is using the before element to take up 50% of the TD space so that text is perfectly centered vertically, and adding vertical align top to keep the text aligned with the top of the center.

Answer 3

Answer №2

To adjust the spacing around the block, consider modifying the margin. Implement margin-top:50%;
Alternatively, experiment with vertica-align:center;
This approach will center align it, which seems to be your intention with the 50% adjustment.

Answer 4

To adjust the spacing around the block, consider modifying the margin. Implement margin-top:50%;
Alternatively, experiment with vertica-align:center;
This approach will center align it, which seems to be your intention with the 50% adjustment.

vertical alignment, almost there

Answer №1

Answer №2

Similar questions

What is the best way to extract text from a dynamically changing element using jQuery?

Other browsers, such as Chrome and Firefox, are visible, except for Safari

Adjust the text orientation using CSS within an SVG element

Ways to verify when leaving the webpage

Having trouble with sending a POST request to a URL?

Change the position of the specified footer on the one-page website

Is AngularJS governed by a distinct set of guidelines for ARIA implementation?

Analog Clock Time Adjustment Bubble Deviation Dilemma

Exploring the Images directory

How can I prevent scrolling in a Vue mobile menu?

Looking to extract text between specific match groups using regex from an HTML YouTube page? Here's how you can do

Minimize the entire project by compressing the .css, .js, and .html files

Creating a div with a fixed size in Tailwind CSS: A beginner's guide

What are some effective methods for testing web applications on mobile devices?

Automatically shift focus after being focused on

What benefits does a dynamic website like this offer compared to one that is purely AJAX-based?

Adjust the sizing of all fonts following the switch in font styles

Footer that is adhered to the bottom of the page with a

Another option instead of preloading images

The HTML and CSS layout is not displaying correctly as planned