Html 将包含图像的div居中_Html_Css

Html 将包含图像的div居中

html css

Html 将包含图像的div居中,html,css,Html,Css,我正在尝试将图像居中，但失败了。我加了边距：自动；图像，但不工作。移除浮子时：左；从旋转木马，结构变得混乱如何将图像居中谢谢 <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script type="text/javascript">

我正在尝试将图像居中，但失败了。我加了边距：自动；图像，但不工作。移除浮子时：左；从旋转木马，结构变得混乱

如何将图像居中

谢谢

<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>


$（文档）.ready（函数（）
{
var显示默认值=真；
var did_scroll=false；
$（窗口）。打开（“滚动”，功能（e）
{
did_scroll=true；
});
window.setInterval（函数（）
{
如果（是否滚动）
{
did_scroll=false；
if（显示默认值&&$（document）.scrollTop（）>=100）
{
显示默认值=false；
$（“#标题”）.css（'位置'，'固定'）；
$（“#默认值”）.stop（）.hide（）；
$（“#粘性”）.fadeIn（500）；
}
如果（！showing_default&&$（document）.scrollTop（）<100）则为else
{
显示默认值=真；
$（“#粘性”）.stop（）.hide（）；
$（“#默认值”）.fadeIn（500）；
$（“#标题”）.css（'位置'，'固定'）；
}
}
}, 250);
});
*
{
边际：0px；
填充：0px；
}
#页眉、#默认值、#转盘、#正文、#页脚
{
显示：块；
宽度：100%；
}
/*---标题--------------------------------------------------------------------*/
#标题，#默认值，#粘性
{
背景：#EEEEEE；
}
#标题
{
位置：固定；
z指数：100；
边框底部：1px实心#CCCC；
}
#违约
{
高度：100px；
}
#粘的
{
显示：无；
高度：50px；
}
/*---旋转木马--------------------------------------------------------------------*/
#旋转木马
{
利润上限：101px；
浮动：左；
高度：400px；
背景：#FFFFFF；
}
#图像
{
位置：绝对位置；
}
.形象
{
显示：无；
位置：绝对位置；
宽度：900px；
高度：400px；
}
.图像img
{
宽度：900px；
高度：400px；
}
.首先
{
显示：块；
}
/*---正文--------------------------------------------------------------------*/
#身体
{
背景：#EEEEEE；
}
/*---页脚--------------------------------------------------------------------*/
#页脚
{
背景：#DDDDDD；
}
默认标题
粘头
身体
身体
身体
身体
身体
身体
身体
身体
身体
身体
身体
身体
身体
身体
身体
身体
身体
身体
身体
身体
身体
身体
身体
身体
身体
身体
/>主体
主体
主体
底部
页脚

添加

左边距：

元素总宽度的一半（负值）和

左边距：50%

Css:

Fiddle:

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

这里有两条不同的路线，所以在给出答案之前，我想解释一下。。。布伦丹·赖斯是对的，利润率：0；仅适用于块级元素，默认情况下IMG不是块级。我还必须补充一点，元素需要小于100%的指定宽度才能工作

浏览器为每个HTML对象指定默认属性，您可以使用CSS覆盖这些属性。“显示”是一条规则，用于描述此元素将控制的流类型和空间（此处有更多详细信息：）。默认情况下，块级元素（如DIV或P标记）的宽度为其容器的100%。这会导致在其前后返回一行

当我们希望将块级元素居中时，通常会覆盖宽度，然后设置边距：0自动；当我们想使内联对象居中时，文本对齐：居中；这是惯例

在您的情况下，我将从设置位置开始：相对；并在div#carousel上指定一个宽度，如使用float规则时所示。您的转盘分区和图像分区是否需要位置：绝对？如果是这样，我将添加

display:block；保证金：0自动到您的。图像img
规则。
您使用了如下结构：
<div id="images">
    <div id="image">...</div>
    <div id="image">...</div>
    <div id="image">...</div>
    <div id="image">...</div>
</div>


...
...
...
...

因此我建议将div居中，并根据div宽度调整图像。。。
我的解决方案的唯一问题可能是不同大小的图像
您可以查看我的小提琴示例：

.photo { display: block; margin: 0 auto; }

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