Question

我正在开发一个有javascript图像旋转器的网页，但它需要能够处理不同大小的图像。

我作为基础使用的代码在包含图像的浮动LI之外有一个DIV，但无论我尝试什么，我似乎无法将图像全部集中在一起。唯一一个集中在宽度为800px的那个。

我觉得这与浮动，位置或显示有关，但是我已经乱了好几个小时而没有运气。

这是我的网站：

这是我借用图像旋转器代码的地方： http://www.serie3.info/s3slider/（代码）http://www.serie3.info/s3slider/demonstration.html（演示）

感谢您提供的任何帮助！

Answer 1

添加：

left: 0;
padding: 0;

到#slider1Content样式。

然后从float: left;样式中删除.slider1Image。

请注意，源CSS包含此警告：“在几个维度上与图像宽度相同”。由于此CSS的大小不适合每张图片，因此每张图片周围都会有白色边距。

如果您希望动态重置这些关键维度（我认为该网站看起来没有这个），那么这是一个单独的问题，在此之前已在此处得到解答。

Answer 2

这也适用（在Firefox和Safari中，没有尝试IE）。另存为.html示例。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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"></script>
    <script type="text/javascript" src="http://picandwords.be-better.net/s3Slider.js"></script>
    <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>

CSS挫折：如何在LI标签内居中浮动不同宽度的图像？

2 个答案: