Разочарование в CSS: Как центрировать плавающие изображения различной ширины внутри тегов LI? - PullRequest
Новая
       3

Разочарование в CSS: Как центрировать плавающие изображения различной ширины внутри тегов LI?

0 голосов
/ 19 августа 2010

Я работаю над веб-страницей, на которой есть ротатор изображений javascript, но он должен уметь обрабатывать изображения разных размеров.

Код, который я использую в качестве основы, имеет DIV вне плавающих LI, которые содержат изображения, но, что бы я ни пытался, я не могу заставить изображения центрироваться. Единственный, который центрируется, это тот, который имеет ширину 800 пикселей.

Мне кажется, что это как-то связано с плавающей точкой, позицией или отображением, но я часами бездельничал без дела.

Вот мой сайт:

Вот где я позаимствовал код ротатора изображения: http://www.serie3.info/s3slider/ (код) http://www.serie3.info/s3slider/demonstration.html (демо)

Спасибо за любую помощь, вы можете предоставить!

Ответы [ 2 ]

1 голос
/ 19 августа 2010

Это также работает (в 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>
1 голос
/ 19 августа 2010

Добавить: 

left: 0;
padding: 0;

в стиле #slider1Content.

Затем удалите float: left; из стиля .slider1Image.

Обратите внимание, что исходный CSS содержит это предупреждение: " важно быть таким же, как ширина изображения " в нескольких измерениях. Так как этот CSS не подходит для каждого изображения, у вас будет белый край вокруг каждого изображения.

Если вы хотите динамически сбросить эти ключевые параметры (я думаю, что сайт выглядит нормально без этого), то это отдельный вопрос, на который мы уже отвечали здесь в SO.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...