Question

我正试图让我的导航栏上的徽标居中，导航栏的其他项目就在它周围。目前，徽标位于文本项目的中心位置，但我无法将整个徽标与其周围的文本对齐。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Charity</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
 <div id='nav'>
  <ul class='navigation'>
   <li><a href='#'>Home</a></li>
   <li><a href='#'>Events</a></li>
  </ul>

 <img src="images/main-logo.png" id="logo" />

  <ul class="navigation">
   <li><a href='#'>Full list of Charities</a></li>
  </ul>
</div><!-- end of nav -->
</body>
</html>

css

html, body {
padding: 0;
margin: 0;
}
#logo {
float: left;
margin:auto;
}
#nav {
margin:auto;
background-color: #CCC;
height: 66px;
box-shadow: 0px 1px 10px #5E5E5E;
}
.navigation {
list-style-type: none;
float: left;
}

li {
display: inline;
padding: 15px;
margin:auto;
}

#nav a {
font-size: 1.6em;
text-transform: uppercase;
text-shadow: 0 0 0.3em #464646;
font-weight: bold;
font-family: century gothic;
text-decoration: none;
color: #262626;
opacity: 0.26;
}
#nav a:hover {
opacity: 0.36;
}

Answer 1

如果要将图像置于li项之间，请将其作为项目：

<div id='nav'>
  <ul class='navigation'>
   <li><a href='#'>Home</a></li>
   <li><a href='#'>Events</a></li>
   <li><img src="images/main-logo.png" id="logo" /></li>
   <li><a href='#'>Full list of Charities</a></li>
  </ul>
</div>

!!!别忘了删除#logo样式!!!

检查出来：http://jsfiddle.net/QUkPj/

Answer 2

为了使边距适用于图像，您需要在它们上声明display:block。默认情况下，img标签显示为内联元素（并且margin不会对内联元素执行任何操作）。

见这里：http://jsfiddle.net/9xtea/1/

Answer 3

因为您希望将徽标居中并使其余元素左右对齐，所以您需要使用绝对位置：

#logo { position: absolute; top: 0; left: 50%; margin-left: -??px; } /* negative margin half the width of the logo */
.navigation-left { list-style-type: none; position: absolute; right: 50%; margin-right: ??px } /* positive margin half the width of the logo */
.navigation-right { list-style-type: none; position: absolute; left: 50%; margin-left: ??px } /* positive margin half the width of the logo */

这会将徽标置于导航栏中心，然后在其周围放置左右菜单选项，无论其大小如何

http://jsfiddle.net/EWf56/

中间带徽标的导航栏不会居中

3 个答案: