更新了小提琴

Question

我想在我的菜单栏上将图像置于其他两个div之间，这是一张显示我想要做的图像： here

我想将社交图标放在红色框所在的中心，我知道我可以通过使用填充和边距来逐个像素地进行操作，但有一种方法可以完美地定位在那里？

我试过添加margin-left：auto;和保证金权利：auto;然而，这并没有做任何事情。

这是我的HTML：

<div id="header">
    <div id="pre_header">
        <div class="pre_header_content">
            <div id="pre_header_content_left">
                <ul>
                    <a href="pages/#.php"><li><img class="navigation_icons" src="images/navigation/voucher.png" width="12"></img>Voucher codes</li></a>
                    <a href="pages/#.php"><li><img class="navigation_icons" src="images/navigation/basket.png" width="12"></img>In-store codes</li></a>
                    <a href="pages/#.php"><li><img class="navigation_icons" src="images/navigation/mouse.png" width="12"></img>Online codes</li></a>
                    <a href="pages/#.php"><li><img class="navigation_icons" src="images/navigation/speaker.png" width="12"></img>Advertise</li></a>
                </ul>
            </div>
            <div id="pre_header_social_icons">
                <a href="pages/#.php"><img class="header_social_icons" src="images/social/header_facebook_grey.png" onmouseover="this.src='images/social/header_facebook_white.png'" onmouseout="this.src='images/social/header_facebook_grey.png'" width="14"></img></a>
                <a href="pages/#.php"><img class="header_social_icons" src="images/social/header_twitter_grey.png" onmouseover="this.src='images/social/header_twitter_white.png'" onmouseout="this.src='images/social/header_twitter_grey.png'" width="14"></img></a>
                <a href="pages/#.php"><img class="header_social_icons" src="images/social/header_google_grey.png" onmouseover="this.src='images/social/header_google_white.png'" onmouseout="this.src='images/social/header_google_grey.png'" width="14"></img></a>
            </div>
            <div id="pre_header_content_right">
                <ul>
                    <a href="pages/#.php"><li><img class="navigation_icons" src="images/navigation/login.png" width="12"></img>Login</li></a>
                    <a href="pages/#.php"><li><img class="navigation_icons" src="images/navigation/thumb.png" width="12"></img>Sign up</li></a>
                </ul>
            </div>
        </div>
    </div>
    <div id="main_header">
        <div class="main_header_content">
            Test
        </div>
    </div>
</div>

这是我的CSS：

#pre_header {
    width:100%;
    height:30px;
    background-color:#202020;
    border-bottom:1px solid black;
}
.pre_header_content {
    margin:0 auto;
    width:1140px;
}
#pre_header_content_left {
    float:left;
}
#pre_header_content_left ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    line-height:30px;
}
#pre_header_content_left li {
    display: inline;
    border-right: 1px solid #292929;
    border-left: 1px solid #292929;
    padding:6px 15px 5px 15px;
    margin-right:-2px;
    font-size:14px;
}
#pre_header_content_left a {
    text-decoration:none;
    color:#fff;

}
#pre_header_content_left li:hover {
    background-color:#4e4e4e;

}

#pre_header_content_right {
    float:right;
}
#pre_header_content_right ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    line-height:30px;
}
#pre_header_content_right li {
    display: inline;
    border-right: 1px solid #292929;
    border-left: 1px solid #292929;
    padding:6px 15px 5px 15px;
    margin-right:-2px;
    font-size:14px;
}
#pre_header_content_right a {
    text-decoration:none;
    color:#fff;

}
#pre_header_content_right li:hover {
    background-color:#4e4e4e;

}
.navigation_icons {
    padding-right:5px;
}

#pre_header_social_icons { 
    float:none;
    display:inline;
    line-height: 30px;
      margin-left: 0;
    margin-right: 0;

}
.header_social_icons {
    padding-left:5px;
    padding-right:5px;
}


#main_header {
    width:100%;
    height:70px;
    background-color:#343434;
}
.main_header_content {
    margin:0 auto;
    width:1140px;
}

解决方案是什么？

Answer 1

使用display：inline，你无法自由移动框。你可以在社交图标div中使用display：inline-block来尝试它：

color

看到那个小提琴：https://jsfiddle.net/twu4djwz/

更新了小提琴

https://jsfiddle.net/twu4djwz/2/

Answer 2

我认为这里唯一的可能就是使用百分比。

我已将您的HTML编辑为基础知识，这就是我想出的：

<强> HTML

<div id="header">
    <div id="pre_header">
        <div class="pre_header_content">
            <div id="pre_header_content_left">
            </div>
            <div id="pre_header_social_icons">
            </div>
            <div id="pre_header_content_right">
            </div>
        </div>
    </div>
</div>

<强> CSS

#pre_header {
    width:1140px;
    height:30px;
    background-color:#202020;
    border-bottom:1px solid black;
}

#pre_header_content_left {
    float:left;
    width: 40%;
    height: 30px;
    background:blue
}


#pre_header_content_right {
    float:right;
    height:30px;
    width:15%;
    background:yellow;
}

.navigation_icons {
    padding-right:5px;
}

#pre_header_social_icons { 
    float:none;
    display:inline-block;
    line-height: 30px;
     margin: 0 auto;
    position:relative;
    width: 45%;
    height: 30px;
    background-color:red;
    text-align: center;

}
.header_social_icons {
    padding-left:5px;
    padding-right:5px;
}

Fiddle

我所做的是将pre_header_content_left的宽度设为40%，将pre_header_content_right的宽度设为15%，并将剩余的45%应用于social_icons，已经有来自马科斯答案的text-align: center。

你可能想玩小提琴，所以它完全符合你的需要。我现在已经使用了你的静态1140px - 宽条形图，但是我建议你在那里使用％并在菜单栏的一部分低于X%时应用某种CSS样式。

另外：看一下this question，看看你是否可以使用接受的答案制作一些能自动填满你social_icons剩下的％而不是给它一个静态的%-width }。

在两个周围的div之间放置一个IMG中心

2 个答案:

更新了小提琴