tags:

views:

1344

answers:

6
+3  Q: 

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

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?

+7  A: 

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"&gt;   
<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>
merkuro  2009-06-25 04:42:29
Good tips on centering, but I'd argue against using a span in favor of a div. In this case, a span wouldn't be a semantic representation of the content. A div would be more fitting, in my opinion.
Evan Meagher  2009-06-25 04:44:54
Neither <div> nor <span> has any semantic meaning.
John Kugelman  2009-06-25 04:48:47
@merkuro: margin-left: auto; margin-right: auto; dosen't seem to work in IE? (I also hate IE with a passion)
Bob Dylan  2009-06-25 04:52:59
@merkuro: Good suggestion +1, but it still didn't solve my problem.
Bob Dylan  2009-06-25 05:06:41
@John Kugelman although they could be used in a very similar fashion, I think a by nature inline-element should be used here and I see no reason to define this as a whole separate paragraph (which is intend of a div in my opinion).
merkuro  2009-06-25 05:10:56
@bobbydylan Just updated the code. Is this working for you? Which version of IE are you using? If you get this running it should be very easy to just swap the span with the images (and leave the DIV out, because block elements cannot/should not be centered this way).
merkuro  2009-06-25 05:19:09
@bobbydylan: Do you have a DOCTYPE defined? margin: auto would not work as expected unless that is defined in IE.
Adhip Gupta  2009-06-25 06:26:10
The use of the XML prolog will push IE6 into Quirks mode (not to mention the issue of serving XHTML 1.1 as text/html being dubious to start with)
David Dorward  2009-06-25 09:43:23
@David Dorward thanks for your feedback. According to w3.org this example is valid. However my questions are, does it have any effect on the rendering of this specific site and should we program for IE6 bugs? According to http://tantek.com/XHTML/Test/minimal11.html, quoting from w3, this is the preferred method of declaring a valid XML file, which is supposed to be delivered as a website. However there are 3 valid other options to choose from.
merkuro  2009-06-25 10:41:59
@merkuro: Would you believe the DOCTYPE fixed the whole thing? Thanks!
Bob Dylan  2009-06-25 15:59:28
who doesn't specify doctypes in this day and age?
Jason  2009-08-03 07:48:42
+2  A:  
#slideshow {
margin: 0 auto;
}

and also text-align: center

for the table

Rony  2009-06-25 05:21:04
You will also need to set the width of the div to be 100% of the TD.
elcuco  2009-06-25 05:39:28
A: 

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.

Nooshu  2009-06-25 07:53:45
A: 

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.

Emily  2009-06-25 10:56:28
A: 

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%;
}
kubak  2009-06-25 11:04:32
A: 

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>

 2009-08-11 22:13:10

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?