CODEWITHSUNDEEP
cssimagealignmentcss-tables
qadenza
qadenza

Reputation: 9293

How to stack and align images inside a table cell?

I want to place a js analog clock inside a table cell

#table02{
    width:100%;
}
#tdLogo02{
    background:#ff0000;
    width:17%;
}
#tdClock{
    text-align:center;  
}
.hands{
    border:thin solid red;
}
#hour {
    z-index: 1;
}
#min {
    z-index: 2;
}
#sec {
    z-index: 3;
}

hands should be stacked vertically and aligned both horizontally and vertically inside a cell. I tried with position:fixed, position:absolute - hands are stacked but not centered horizontally.

Please see the fiddle

Upvotes: 0

Views: 118

Answers (1)

Subtlebot
Subtlebot

Reputation: 322

It's difficult to see how the alignment would work out since we can't see the relative images in your fiddle.

This might be a little closer to what you're looking for using PiLHA's fiddle: http://jsfiddle.net/fptAe/3/

With the containing #tdClock center aligned you can set the elements inside to position: absolute or position: relative allowing you to stack them with the proper z-index.

Assuming the clock images are the same size, all have the same center, and the hands rotate around the same axis, you could define the dimensions of #tdClock specifically to the dimensions of the clock images and things should line up.

If the images are different sizes you'll have have to nudge them into place using left and right positioning, or margin.

Upvotes: 1

Related Questions