Question

我希望彼此旁边有三个div（我把它们放在一个.wrapper div中，所以我可以将它们浮到左边）。这三个div应该以页面为中心。所以我想，如果我将.wrapper与margin-left / right：auto对中，所有三个div都会居中。这没用。此外，当我调整浏览器的大小时，div会移动。我不希望这种情况发生。

我用Google搜索了无穷无尽的内容，并在脚本中添加了大量解决方案，没有任何效果。

此外，它显示每个浏览器（Firefox，Safari和Chrome）不同。

这是我的HTML：

<div id="container">
    <div class="wrapper">
        <div id="lost"><img src="images/lost.png"></div>
        <div id="compass"><img src="images/compass.png"></div>
        <div id="sailor"><img src="images/sailor.png"></div>
    </div>
    <div id="sea">
        <img src="images/seaAnimated.png" class="sea" id="animatedSea">
    </div>
</div>

我的CSS：

body,html
{
    margin:0px;
    padding:0px;
}

#container
{
    position:absolute;
    width:100%;
    height:100%;
    margin-left:auto;
    margin-right:auto;
}

.wrapper
{
    left:auto;
    right:auto;
    margin-left:auto;
    margin-top:8%;
    margin-right:auto;
    padding-left:auto;
    padding-right:auto;
    width:100%;
    height:75%;
}

#lost
{
    float:left;
    width:auto;
    clear:both;
    margin-left:auto;
    margin-right:auto;
}
#compass
{
    float:left;
    width:auto;
    height:75%;
    margin-left:auto;
    margin-right:auto;
}
#sailor
{
    float:left;
    width:auto;
    height:75%;
    margin-left:auto;
    margin-right:auto;
}

#sea
{
    position:absolute;
    bottom:0px;
    z-index:2;
    background-image:url(images/sea.png);
    background-repeat:repeat-x;
    background-position:bottom;
    height:25%;
    width:100%;
}

#animatedSea
{
    position:absolute;
    bottom:10px;
    width:auto;
    height:25%;
    z-index:-1;
}

Answer 1

试试这个

<强> CSS

.wrapper{
    text-align:center;
    margin-top:8%;
    width:100%;
    height:75%;
}

#lost{
    display:inline-block;
    width:50px;
    height:50px;
    background-color:#0C0;
}
#compass{
    display:inline-block;
    width:50px;
    height:50px;
    background-color:#06F;
}
#sailor{
    display:inline-block;
    width:50px;
    height:50px;
    background-color:#96F;  
}

<强> HTML

<div class="wrapper">
    <div id="lost">123</div>
    <div id="compass">456</div>
    <div id="sailor">789</div>
</div>

jsFiddle Code

Answer 2

您可以在包装上使用固定宽度使其居中。你必须指定宽度（而不是留空）因为div是块级的，这意味着它们默认填充整个宽度。

http://jsfiddle.net/isherwood/CBMaX/2

.wrapper {
    width: 240px;
    margin-left:auto;
    margin-right:auto;
}

Answer 3

#wrapper
{
 text-align: center;
}
#compass
{
width:33.3%; 
}
#sailor
{
width:33.3%;
}
#lost
{
 width:33.3%;
}

试试这个css。将此css包含在您的CSS中。

Div未正确显示，加上调整大小问题

3 个答案: