Html 中间带有徽标的导航栏将不居中_Html_Css_Nav

Html 中间带有徽标的导航栏将不居中

html css

Html 中间带有徽标的导航栏将不居中,html,css,nav,Html,Css,Nav,我试图使我的导航栏上的标志居中，导航栏的其他项目围绕它。目前的标志是在文本项目的中心，它应该在那里，但我不能得到整个标志的文字围绕它的中心 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Charity</title> <link rel="stylesheet" type="text/css" href="style.css"> </

我试图使我的导航栏上的标志居中，导航栏的其他项目围绕它。目前的标志是在文本项目的中心，它应该在那里，但我不能得到整个标志的文字围绕它的中心

<!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>

如果要将图像居中放置在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>

！！！别忘了删除#徽标样式

检查它：

为了让边距在图像上工作，您需要在边距上声明

display:block

。默认情况下，img标记显示为内联元素（边距对内联元素没有任何作用）

请参见此处：

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

#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 */

这将使徽标在导航栏中居中，然后将左右菜单选项置于其周围，而不考虑其大小

您希望徽标是一个项目，还是将其置于背景上？

#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 */