0

我正在尝试使图像居中，但没有这样做。我添加了边距：自动；到图像但不工作。去除浮动时：左；从旋转木马，结构变得混乱。

如何使图像居中？

谢谢

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function ()
            {
                var showing_default = true;
                var did_scroll = false;

                $(window).on("scroll", function (e)
                {
                    did_scroll = true;
                });

                window.setInterval(function ()
                {
                    if (did_scroll)
                    {
                        did_scroll = false;

                        if (showing_default && $(document).scrollTop() >= 100)
                        {
                            showing_default = false;
                            $("#header").css('position', 'fixed');
                            $("#default").stop().hide();
                            $("#sticky").fadeIn(500);
                        }
                        else if (! showing_default && $(document).scrollTop() < 100)
                        {
                            showing_default = true;
                            $("#sticky").stop().hide();
                            $("#default").fadeIn(500);
                            $("#header").css('position', 'fixed');
                        }
                    }
                }, 250);
            });
        </script>

        <style>
            *
            {
                margin: 0px;
                padding: 0px;
            }
            #header, #default, #carousel, #body, #footer
            {
                display: block;
                width: 100%;
            }
            /* --- HEADER ------------------------------------------------------------------ */
            #header, #default, #sticky
            {
                background: #EEEEEE;
            }
            #header
            {
                position: fixed;
                z-index: 100;
                border-bottom: 1px solid #CCCCCC;
            }
            #default
            {
                height: 100px;
            }
            #sticky
            {
                display: none;
                height: 50px;
            }
            /* --- CAROUSEL ---------------------------------------------------------------- */
            #carousel
            {
                margin-top: 101px;
                float: left;
                height: 400px;
                background: #FFFFFF;
            }
            #images
            {
                position: absolute;
            }
            .image
            {
                display: none;
                position: absolute;
                width: 900px;
                height: 400px;
            }
            .image img
            {
                width: 900px;
                height: 400px;
            }
            .first
            {
                display: block;
            }
            /* --- BODY -------------------------------------------------------------------- */
            #body
            {
                background: #EEEEEE;
            }
            /* --- FOOTER ------------------------------------------------------------------ */
            #footer
            {
                background: #DDDDDD;
            }
        </style>
    </head>

    <body>
        <div id="header">
            <div id="default">DEFAULT HEADER</div>
            <div id="sticky">STICKY HEADER</div>
        </div>

        <div id="carousel">
            <div id="images">
                <div class="image first"><img src="images/1.jpg" /></div>
                <div class="image"><img src="images/2.jpg" /></div>
                <div class="image"><img src="images/3.jpg" /></div>
                <div class="image"><img src="images/4.jpg" /></div>
            </div>
        </div>

        <div id="body">TOP<br /><br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br /><br />BOTTOM</div>

        <div id="footer">FOOTER</div>
    </body>
</html>
4

4 回答 4

1

您使用了这样的结构：

<div id="images">
    <div id="image">...</div>
    <div id="image">...</div>
    <div id="image">...</div>
    <div id="image">...</div>
</div>

所以我建议改为将 div 居中，并将图像调整到 div 宽度......我的解决方案的独特问题可能是不同尺寸的图像。

你可以查看我的示例小提琴： http: //jsfiddle.net/zsfjL/11/ http://jsfiddle.net/zsfjL/10/embedded/result/

于 2013-08-23T18:20:59.170 回答
1

当使用“margin: 0 auto”声明使图像居中时，您还需要“display: block”声明（div 元素不需要这个）。

.photo { display: block; margin: 0 auto; }
于 2013-08-23T16:43:14.813 回答
0

你可以去这里有几条不同的路线，所以在给出答案之前我想解释一下...... Brendan Rice 是对的，margin:0 auto; 仅适用于块级元素，IMG 默认不是块级。我还必须补充一点，该元素需要一个小于 100% 的指定宽度才能正常工作。

浏览器为每个 HTML 对象分配默认属性，您可以使用 CSS 覆盖这些属性。显示是描述该元素将控制的流和空间类型的规则（更多详细信息请参见：http: //css-tricks.com/almanac/properties/d/display/）。默认情况下，块级元素（如 DIV 或 P 标签）的宽度为其容器的 100%。这会导致它之前和之后的行返回。

当我们希望将块级元素居中时，通常会覆盖宽度然后设置 margin:0 auto; 当我们想要居中一个内联对象时， text-align:center; 是习惯性的。

在您的情况下，我将首先设置 position:relative; 并在您的 div#carousel 上指定一个宽度，如使用浮动规则时所指示的那样。您的轮播 div 和图像 div 是否需要 position:absolute ？如果是这样，我会添加display:block;margin:0 auto;到您的.image img规则中。

于 2013-08-23T18:20:03.620 回答
0

添加margin-left:元素总宽度的一半（负值）和left:50%

CSS：

    #images
    {
        position: absolute;
        margin-left: -450px;
        left: 50%;
    }

小提琴：http: //jsfiddle.net/Vs65D/show

于 2013-08-23T16:40:11.620 回答