0

I have a JSFIDDLE created where I have pasted code picked up online from another stack exchange thread to show how to have responsive tables with scrolling. I modified that code while testing the approach and it works great on my machine. the only problem I am having is that the whole table is top aligned . I am just not able to figure out what property needs to be changed in order to have the whole table be both horizontal and center aligned. If any of the gurus have any suggestions would be great!

The JSFIDDLE is here

background-size: 50px 50px;
background-color: #fff;
background-size: 50px 50px;
vertical-align: middle;

I tried adding Vertical-align:middle

Does not seem to work

Also the actual images are bottom aligned within the TD. Is it possible to make them center aligned.

Thanks

Thanks!

Rian
  • 3
  • 1
  • 4

1 Answers1

5

In supported browsers (most of them), you can use top: 50%/left: 50% in combination with translateX(-50%) translateY(-50%) to dynamically vertically/horizontally center the element.

.container {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);}

http://jsfiddle.net/47x60k4w/show/

Jayanit Satani
  • 155
  • 7
  • Thanks Jayanit. ! That worked. Another part of that question is related to the actual images not being valigned. Although the images are broken, but the boundaries is visible. you will notice the first image is bottom aligned. I tried the valign="Middle" for the TD but that did not work. – Rian Mar 09 '16 at 07:25