How to center my a div in a table using CSS?

StackOverflow https://stackoverflow.com/questions/1042209

  •  22-07-2019
  •  | 
  •  

Question

I'm trying to add a slideshow to one of my websites. The whole page is layed out in an HTML table (which I hate with a passion AND did not choose). I want to center my slideshow inside that paticular column. Here is what my CSS looks like:

#slideshow {
position:relative;
}

#slideshow IMG {
position:absolute;
z-index:8;
opacity:0.0;
}

#slideshow IMG.active {
z-index:10;
opacity:1.0;
}

#slideshow IMG.last-active {
z-index:9;
}

Here is my JQuery function to change images:

function slideSwitch() {
var $active = $('#slideshow IMG.active');

if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

// use this to pull the images in the order they appear in the markup
var $next =  $active.next().length ? $active.next()
    : $('#slideshow IMG:first');

$active.addClass('last-active');

$next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
    });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

And finally here is the slideshow div inside the table:

<td bgcolor="red" align="center" valign="top"> 
<div id="slideshow">
    <img src="2009Slideshow\1.jpg" alt="Slideshow Image 1" class="active" />
    <img src="2009Slideshow\2.jpg" alt="Slideshow Image 2" />
    <img src="2009Slideshow\3.jpg" alt="Slideshow Image 3" />
    etc...
    etc...
</div>                    
</td>

So why can't I get my slideshow to center inside of that column?

Was it helpful?

Solution

Inline elements can be easily centered by using the css property "text-align:center;". Block elements should be align in the center by using "margin-left:auto;margin-right:auto;" and by giving them a fixed width. In your particular case I would suggest to use a span instead of a "div" or get rid of the div completely and use the text-align method.

Update

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">     
    <head>      
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
        <title>Centering</title>
    <style type="text/css">
      table{
       border:1px solid black; 
      }
      span{
        background-color:red; 
        color:white;       
      } 
      td{
        text-align:center;
        width:200px; 
      }
    </style>
  </head>
  <body>
    <div class="item" id="item1">
      <table>
        <tr>
          <td>
            <span>Hi there!</span>  
          </td>
        </tr>        
      </table>
    </div>    
    </body>
</html>

OTHER TIPS

#slideshow {
margin: 0 auto;
}

and also text-align: center

for the table

The following solution works even when you dont know the size of the image:

<div style="height:100px; width:100px; display:table-cell; text-align:center; vertical-align:middle;" >
    <img src="images/myPicture.png">
</div>

I would add a comment above but don't have 50 rep.. doh. I seem to remember that if you have anything in front of the doctype in IE6, it sends it into quirks mode. That may be causing problems

<?xml version='1.0' encoding='UTF-8'?>

May be worth a shot removing this.

If you can remove the absolute positioning, use text-align:center on the td.

If you cannot remove the absolute positioning and all your images are the same size, set left to td/2 - img_width/2. So if you had a 80px wide image in a 200px wide td, you would use 

#slideshow img {position:absolute; left:60px; opacity:0; z-index:8;}

If you cannot remove the absolute positioning and you images are different sizes, you will have to calculate the left value in your javascript.

IE does not support opacity. It uses filter: alpha(opacity = 50); instead.

standard

 div#slideshow {
    margin : 0 auto;
    width : 200px;
}

and for (old ?) ie

td {
    text-align : center;
}

ie doesn't "like" auto margins but centers not only inline elements but block elements (divs)

also not shure what is standard value of display property for td on ie because it doesn't use table-cell and text-align will not work inside inline elements so another possible aproach would be to wrap it around another div :

<td>
<div id="slideshow_container">
<div id="slideshow">
...
</div>
</div>
</td>

and css

div#slideshow {
    margin : 0 auto;
    width : 200px;
}
div#slideshow_container {
    text-align : center;
    width : 100%;
    height : 100%;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top