Question

我正在尝试制作一个标题，其中div位于中间的徽标中心。随着Logo div挂了，我已经成功完成了。然而，我无法弄清楚如何将logo div放在链接div的中间以供我使用。

任何帮助将不胜感激，谷歌搜索没有给我任何运气，但我不知道我知道要搜索什么。我不擅长使事情看起来很正常:(

页面布局：

标题（叠加）
内容（z-index：-1）

在.headerLogo上声明没有浮动的网站图片 enter image description here

在float: left上声明.headerLogo的网站图片 enter image description here

HTML：

<div class='header'>
  <div class='headerLink'>Home</div>
  <div class='headerLink'>Contact</div>
  <div class='headerLogo'></div>
  <div class='headerLink'>Menu</div>
  <div class='headerLink'>Connect</div>
</div>
<div class='content'>
</div>

的CSS：

*{
  margin: 0;
}
body,html{
  background-color: #000;
  color: #FFF;
  text-align: center;
  font-family: calibri;
  height: 100%;
  overflow:auto;
}

.header{
  top:0;
  height: 100px;
  line-height: 100px;
  width: 100%;
  display: inline-block;
  border-bottom: lime 10px solid;
  margin:0;
  position: static;
  background-color: #000;
  font-size: 24px;
}

.headerLink{
  display: inline-block;
  float: center;
  margin-left: 60px;
  margin-right: 60px;
  margin-top: 0px;
  margin-bottom: 0px;
}

.headerLogo{
  display: inline;
  float: left;
  position: static;
  background-image: url('/images/logo.jpg');
  background-image: no-repeat;
  background-position: left top;
  background-size: 100%;
  margin-left: auto;
  margin-right: auto;
  background-color: lime;
  color: lime;
  width: 200px;
  height: 200px;
  line-height: 100px;

}
.content{
 z-index: -1;
 float: left;
 text-align: center;
 min-height: 100%;
 width: 100%;
 margin-top: -110px;
 margin-bottom: -50px;
 background-color: #333343;
}

Answer 1

你有几种方法可以解决这个问题。我认为最简单的方法是使用假占位符在中间的菜单项之间创建水平空间，然后将徽标绝对放在顶部。

HTML：

<div class='header'>
  <div class='headerLink'>Home</div>
  <div class='headerLink'>Contact</div>
  <div class='headerLogo'></div>
  <div class='headerLink headerLogoFake'></div>
  <div class='headerLink'>Menu</div>
  <div class='headerLink'>Connect</div>
</div>
<div class='content'>
</div>

CSS：

.headerLogo{
  display: inline;
  float: left;
  position: static;
  background-image: url('/images/logo.jpg');
  background-image: no-repeat;
  background-position: left top;
  background-size: 100%;
  background-color: lime;
  color: lime;
  width: 200px;
  height: 200px;
  line-height: 100px;
  position:absolute;
  top:0;
  left:50%;
  margin-left:-100px;
}
.headerLogoFake {
  width:200px;
}

正如你可能知道的那样，如果你只是保留它，没有漂浮物，它将在中间，但它会将绿色底部边缘向下推。这将在中间放置一个虚假的空物，但与菜单项的高度相同，因此不会将其向下推。它会在顶部添加徽标。

Answer 2

你提供的加价并没有产生你想要的结果，所以我采用了极简的造型来完成你的要求。

最重要的是float:center;不存在。

如果您为元素赋予display:inline-block;属性，则可以在容器周围使用text-align:center;来集中所有元素。

.header {
   text-align:center;
}

.headerLink {
   display:inline-block;
   padding:10px;
}
.headerLogo {
   display:inline-block;
   height:100px; width:100px;
   background:red;
   margin:0px 10px;
}

然后，将它们与您的徽标垂直排列，给它们一个vertical-align:top属性并将边距设置为接近徽标宽度的一半

http://jsfiddle.net/5V29a/1/ - 更新的演示

Answer 3

Working Fiddle

.headerLogo{
   position:absolute;
   display: inline;
   float: left;
   left 50%
   position: static;
   background-image: url('/images/logo.jpg');
   background-image: no-repeat;
   background-position: left top;
   background-size: 100%;
   margin-left: -50px;
   margin-right: auto;
   background-color: lime;
   color: lime;
   width: 100px;
   height: 100px;
   line-height: 100px;
}

CSS中心（垂直于行高和页面水平）Div

3 个答案: