ansaurus

Question

CSS frustration: How to center floating images of different widths inside LI tags?

Answer 1

+1 A:

Add:

left: 0;
padding: 0;

to the #slider1Content style.

Then delete the float: left; from the .slider1Image style.

Note that the source CSS contains this warning: "important to be same as image width" on several dimensions. Since this CSS isn't sized for each image, you'll have that white margin around each picture.

If you desire to reset those key dimensions dynamically (I think the site looks OK without this), then that is a separate question that has been answered here on SO before.

Brock Adams 2010-08-19 02:51:13

Thanks, this does the centering, although the white margin is a bit annoying so I went with Brandon's version below.

Kane 2010-08-20 16:17:41

Answer 2

+1 A:

This works as well (In Firefox and Safari, haven't tried IE). Save as a .html for an example.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="description" content="A picture and caption that you can change for everyone in the world to see.">
    <meta name="keywords" content="pic and words, pic words, caption">
    <title>Pic and Words</title>
    <link href="http://picandwords.be-better.net/styles.css" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
    <script type="text/javascript" src="http://picandwords.be-better.net/s3Slider.js"&gt;&lt;/script&gt;
    <script type="text/javascript">
        $(document).ready(function() {
            $('#slider1').s3Slider({
                timeOut: 4000 
            });
        });
    </script>
    <style>
        body, html
        {
            margin:0px;
            width:100%;
            height:100%;
            padding:0px;
        }
        #slider1
        {
            text-align:center;
            vertical-align:middle;
            margin:0px;
            padding:0px;
            width:auto;
            height:auto;
        }
        #slider1Content
        {
            text-align:center;
            display:table; /* this is KEY to centering the UL */
            position:static;
            margin:0px auto 0px auto;
            padding:0px;
            width:auto;
            top:auto;
        }
        #pageWrapper
        {
            width:810px;
            height:700px;
            margin:0px auto 0px auto;
            text-align:center;
        }
    </style>
</head>
<body>
    <div id="pageWrapper">
        <h1>Pic and Words</h1>
        <!--<a href="new_form.php">Upload</a> -->
        <br /><br />
        <div id="slider1">
            <ul id="slider1Content">
                <li class="slider1Image">
                    <div>
                        <img src="http://picandwords.be-better.net/uploaded_pics/1282179782-2zdr66e.jpg" 
                        alt="Somewhere down Baja on the way to Cabo." 
                        title="Somewhere down Baja on the way to Cabo." align="center" />
                        <span class="bottom">"Somewhere down Baja on the way to Cabo."</span>
                    </div>
                </li>
                <li class="slider1Image">
                    <div>
                        <img src="http://picandwords.be-better.net/uploaded_pics/1282180309-bicycle.jpg" 
                        alt="Drunk dude on a bike" 
                        title="Drunk dude on a bike" align="center" />
                        <span class="bottom">"Drunk dude on a bike"</span>
                    </div>
                </li>
                <li class="slider1Image">
                    <div>
                        <img src="http://picandwords.be-better.net/uploaded_pics/1282180338-captions03211.jpg" 
                        alt="Do not want!" 
                        title="Do not want!" align="center" />
                        <span class="bottom">"Do not want!"</span>
                    </div>
                </li>           
                <div class="clear slider1Image"></div>
            </ul>
        </div>
    </div>
</body>
</html>

Brandon Boone 2010-08-19 03:00:55

Thanks, this works perfectly! You rock.

Kane 2010-08-20 16:17:11

Glad I was able to help!

Brandon Boone 2010-08-20 16:49:52

ansaurus

tags:

views:

answers:

CSS frustration: How to center floating images of different widths inside LI tags?

related questions