HTML不居中

Question

我有以下HTML：

<div class="flag_container">

    <div class="flag_1">
        <img class="flag_img_1" src="../images/gb.png"></img>

        <div class="speaker_1">
        </div>          
    </div>

    <div class="flag_2">
        <img class="flag_img_2" src="../images/at.png"></img>

        <div class="speaker_2">
        </div>  
    </div>

    <div class="flag_3">
        <img class="flag_img_3" src="../images/de.png"></img>

        <div class="speaker_3">
        </div>  
    </div>

    <div class="flag_4">
        <img class="flag_img_4" src="../images/nl.png"></img>

        <div class="speaker_4">
        </div>  
    </div>

</div>

和CSS：

.flag_img_1{
    width:160px;
    height:80px;
    cursor:pointer;
}

.flag_img_1:hover+.speaker_1{
    display:block;
}

.speaker_1{
    width:100px;
    height:100px;
    background-color:red;   
    display:none;
    position:absolute;
    margin-left:170px;
    margin-top:-90px;
}

.flag_img_2{
    width:160px;
    height:80px;
    cursor:pointer;
}

.flag_img_2:hover+.speaker_2{
    display:block;
}

.speaker_2{
    width:100px;
    height:100px;
    background-color:green; 
    display:none;
    position:absolute;
    margin-left:170px;
    margin-top:-90px;
}

.flag_img_3{
    width:160px;
    height:80px;
    cursor:pointer;
}

.flag_img_3:hover+.speaker_3{
    display:block;
}

.speaker_3{
    width:100px;
    height:100px;
    background-color:blue;  
    display:none;
    position:absolute;
    margin-left:170px;
    margin-top:-90px;
}

.flag_img_4{
    width:160px;
    height:80px;
    cursor:pointer;
}

.flag_img_4:hover+.speaker_4{
    display:block;
}

.speaker_4{
    width:100px;
    height:100px;
    background-color:orange;    
    display:none;
    position:absolute;
    margin-left:170px;
    margin-top:-90px;
}

.flag_container{
    padding:80px 0;
}
.flag_1{
    padding-left:406px;
}

.flag_2{
    float:left;
    padding-left:163px;
    padding-top:40px;
}

.flag_3{
    float:right;
    padding-right:163px;
    padding-top:40px;
}

.flag_4{
    padding-top:160px;
    padding-left:406px;
}

创建以下显示：

并悬停：

蓝色方块是图像的占位符。

一切正常。

我想让显示器响应，所以当屏幕变小时，标志会形成如下的中心结构：

我的问题是，它不会保持中心，但会保持相对于左边的固定位置。这是我的CSS：

.flag_container{
    width:80%;
    margin:auto;
}

.flag_1{
    width:auto;
    padding:0;
    margin-bottom:20px;
    margin-left:20px;
    margin-right:20px;
}

.flag_2{
    width:auto;
    padding:0;
    margin-bottom:20px;
    margin-left:20px;
    margin-right:20px;

}

.flag_3{
    width:auto;
    padding:0;
    margin-bottom:20px;
    margin-left:20px;
    margin-right:20px;
}

.flag_4{
    width:auto;
    padding:0;
    margin-bottom:20px;
    margin-left:20px;
    margin-right:20px;
}

.agendaHeading{
    float:left;
    font-size:120%;
}

.flag_img_1:hover+.speaker_1{
    display:none;
}

.flag_img_2:hover+.speaker_2{
    display:none;
}

.flag_img_3:hover+.speaker_3{
    display:none;
}

.flag_img_4:hover+.speaker_4{
    display:none;
}

我已经尝试了我能想到的每一个组合，并阅读了很多帖子，但它不起作用。我怀疑这与我的div的结构有关，阻止它按我的意愿工作？

我已经设法以我想要的方式将div居中的CSS的一个例子是：

.box1{
    width:85%;
    margin:auto;
    border:1px solid #ffffff;
    float:none;
    height:50px;
}

但这不起作用。

为长篇文章/代码量道歉，但为了证明我的问题，我必须将其全部包含在内。

Answer 1

我认为问题在于你在填充中使用像素而没有％。

您是否尝试在填充左侧，上方和右侧的.flag_ *中使用％而不是固定像素？我已经对你的代码进行了一些操作，使用％可以让你在调整大小的屏幕上更有效地组织div。