Css 试着把我的菜单居中

我似乎不明白我应该如何在徽标和登录/注册中居中显示此菜单

HTML

小提琴是空的，因为我把它从一些我试过的东西上清除了

我来这里是想请人解释一下我应该如何把菜单放在中间？我显然错过了一些东西。

试试这个：

calc（50%-500px）

表示使

边距向左

50%减去

图像的
宽度
和
菜单的一半

#logo{
  float:left;
}
#menu {
  float:left;
  margin-left: calc(50% - 500px);
}

试试这个：

calc（50%-500px）
表示使
边距向左
50%减去
图像的
宽度
和
菜单的一半

#logo{
  float:left;
}
#menu {
  float:left;
  margin-left: calc(50% - 500px);
}

你的意思是像这样把菜单放在中间吗

<header id="header">
  <div id="LogReg">
          <h2><a href="#" id="loginform">Login</a> | <a href="#">Register</a></h2>
  </div>

  <div class="container">
    <div id="logo">
      <a class="logo" href="index.html">
        <img alt="Logo" title="logo" src="Logo/logo.png" >
      </a>          
    </div>

    <nav id="menu">
      <ul class="main_menu">
        <li><a href="#">MENU1</a></li>
        <li><a href="#">MENU2</a></li>
        <li><a href="#">MENU3</a></li>
      </ul>
    </nav>
  </div>
</header>

你的意思是像这样把菜单居中吗

<header id="header">
  <div id="LogReg">
          <h2><a href="#" id="loginform">Login</a> | <a href="#">Register</a></h2>
  </div>

  <div class="container">
    <div id="logo">
      <a class="logo" href="index.html">
        <img alt="Logo" title="logo" src="Logo/logo.png" >
      </a>          
    </div>

    <nav id="menu">
      <ul class="main_menu">
        <li><a href="#">MENU1</a></li>
        <li><a href="#">MENU2</a></li>
        <li><a href="#">MENU3</a></li>
      </ul>
    </nav>
  </div>
</header>


我假设您打算让它们对齐。很明显，你知道你的标志的高度。让我假设您的徽标高度为40px。
将HTML代码修改为以下代码

<header id="header">    
   <div id="logo">
      <a class="logo" href="index.html"><img alt="Logo" title="logo" src="http://www.planwallpaper.com/static/images/9-credit-1.jpg"></a>       
      <a href="#">MENU1</a>
      <a href="#">MENU2</a>
      <a href="#">MENU3</a>                 
   </div> 

  <div id="LogReg">
      <a href="#" id="loginform">Login</a> | <a href="#">Register</a>
  </div>
</header>

我假设在css中img的高度为40px。

这将在同一行中对齐徽标、导航菜单和登录|注册。


如果您需要登录|注册比logo和menu高一点，只需将div#LogoReg的行高降低到40px

如果你想在左右两边都留一些边距，请将整个标题内容包装在另一个div标签中，如下所示

<header id = "header">
  <div id = "header_in">
  </div>
</header>



如果您需要任何不同的内容，请告诉我。
我假设您打算让它们对齐。很明显，你知道你的标志的高度。让我假设您的徽标高度为40px。
将HTML代码修改为以下代码

<header id="header">    
   <div id="logo">
      <a class="logo" href="index.html"><img alt="Logo" title="logo" src="http://www.planwallpaper.com/static/images/9-credit-1.jpg"></a>       
      <a href="#">MENU1</a>
      <a href="#">MENU2</a>
      <a href="#">MENU3</a>                 
   </div> 

  <div id="LogReg">
      <a href="#" id="loginform">Login</a> | <a href="#">Register</a>
  </div>
</header>

我假设在css中img的高度为40px。

这将在同一行中对齐徽标、导航菜单和登录|注册。


如果您需要登录|注册比logo和menu高一点，只需将div#LogoReg的行高降低到40px

如果你想在左右两边都留一些边距，请将整个标题内容包装在另一个div标签中，如下所示

<header id = "header">
  <div id = "header_in">
  </div>
</header>



如果您需要任何不同的功能，请告诉我。请参阅此处的工作演示

HTML:

请参见此处的工作演示

HTML:

徽标、菜单和登录文本都在同一行？登录和注册高一行，但徽标和菜单在同一行徽标、菜单和登录文本都在同一行？登录和注册高一行，但徽标和菜单在同一行
div#header_in{
  width: 80%;
}

<header id="header">

  <div id="LogReg">
    <a href="#" id="loginform">Login</a> | <a href="#">Register</a>
  </div>
  <div id="logo">
    <a class="logo" href="index.html">LOGO</a>
  </div>


    <nav id="menu">
      <ul>
        <li><a href="#">MENU1</a></li>
        <li><a href="#">MENU2</a></li>
        <li><a href="#">MENU3</a></li>
      </ul>
    </nav> 

</header>

#header {
    width:100%;
  display:block;
  position:relative;
}

#LogReg {
    float:right;

}

#logo{
  position:absolute;
  top: 0px;
  left:10px;
}

#menu{
  display:block;
  width:100%;
  text-align:center;
  overflow:hidden;
}
#menu li  {
    display:inline;
}