我想在我的菜单栏上将图像置于其他两个div之间,这是一张显示我想要做的图像:
我想将社交图标放在红色框所在的中心,我知道我可以通过使用填充和边距来逐个像素地进行操作,但有一种方法可以完美地定位在那里?
我试过添加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;
}
解决方案是什么?
答案 0 :(得分:1)
使用display:inline,你无法自由移动框。你可以在社交图标div中使用display:inline-block来尝试它:
color
看到那个小提琴:https://jsfiddle.net/twu4djwz/
答案 1 :(得分:1)
我认为这里唯一的可能就是使用百分比。
我已将您的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;
}
我所做的是将pre_header_content_left
的宽度设为40%
,将pre_header_content_right
的宽度设为15%
,并将剩余的45%
应用于social_icons
,已经有来自马科斯答案的text-align: center
。
你可能想玩小提琴,所以它完全符合你的需要。我现在已经使用了你的静态1140px
- 宽条形图,但是我建议你在那里使用%并在菜单栏的一部分低于X%
时应用某种CSS样式。
另外:看一下this question,看看你是否可以使用接受的答案制作一些能自动填满你social_icons
剩下的%而不是给它一个静态的%-width
}。