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

创建以下显示:

悬停时:

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

一切正常。

我想让显示响应，所以当屏幕变小时，标志会像这样在中心形成:

我的问题是，它不会保持居中，而是相对于左侧保持固定位置。这是我的 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 结构有关，阻止它按我的意愿工作？

一个 CSS 示例，我设法以我在这里尝试的方式将 div 居中:

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

但这行不通。

很抱歉发布了很长的代码/代码量，但为了证明我的问题，我必须将其全部包含在内。

Answer 1

我认为问题在于您使用的是像素，而您的填充中没有 %。

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