How to Float Vertically in CSS?

[davee123]

So, I've got a <table> full of <td>'s. And I want to have a <div> magically pop in sometimes, centered above a particular <td>. That is, I want it to partially COVER the content within the <td>. As is, I'm creating the <td>'s and <div>'s, but I just set the visibility to "hidden" until it's ready to appear. Plus, the <div>'s aren't fully opaque, so you can still see what's underneath.

Anyway, the problem: I can get the <div> to center horizontally-- but not vertically. And unfortunately, the <td>'s can be very different size-wise. Sometimes 50 pixels tall, sometimes 200 pixels tall (depends on the image that's inside it).

So, right now, I've got the div set to:

.addedtag {
    position: relative;
    top: 20px;
    background-color: #DDDDFF;
    font-color: #008000;
    border: 2px solid #904040;
    width: 50%;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-left: auto;
    margin-right: auto;
    filter:alpha(opacity=50);
    opacity:0.5;
}

That puts it about 20 pixels down from the top of the <TD>, but sometimes that looks woefully pathetic. And setting top to a percentage doesn't seem to do ... anything. I was hoping that setting "top: 50%" would set it to 50% of the height of the containing element (a <td>), but apparently not!

Now, I know there's phenomenally complex ways to do this by getting the height of the <td> in javascript, and then referencing that in order to set the "top" to a certain fixed number of pixels. ... But, I was hoping (please?) that there's a better way to do this?

DaveE

 

[wilsont23274]

Yes, there is a better way to do this. You can use the CSS "transform" property to position the div relative to its containing element. For example, to center the div vertically, you can set the following:.addedtag { position: relative; transform: translateY(-50%); background-color: #DDDDFF; font-color: #008000; border: 2px solid #904040; width: 50%; padding-left: 5px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px; margin-left: auto; margin-right: auto; filter:alpha(opacity=50); opacity:0.5;}The "transform: translateY(-50%)" will move the div up 50% of its height, effectively centering it vertically.Hope that helps!