Question

我似乎无法理解如何将此菜单置于徽标和登录/注册中心

HTML

<header id="header">
    <div id="LogReg">
        <h2><a href="#" id="loginform">Login</a> | <a href="#">Register</a></h2>
    </div>
    <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> 
</header>

CSS：

#header {
    width:100%;
}

#logo, #menu {
    float:left;
}

#menu {

}

#menu li  {
display:inline-block;
}

#LogReg {
    text-align:right;
}

小提琴很空洞，因为我从我试过的一些东西中清除了它

所以我在这里要求某人解释我应该如何在中心获取菜单？我显然错过了一些东西。

Answer 1

试试这个：http://jsfiddle.net/hnnsr97x/6/

calc(50% - 500px)说margin-left 50％减去width的{{1}}和image的一半

menu

Answer 2

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

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

CSS样式：

#header {
    width: 100%;
}

.container {
  display: block;
  margin: 0 auto;
  width: 300px;
}

#logo {
  float: left;
}

#menu {
  float: right;
}

.main_menu {
  margin: 0;
}

#menu li  {
    display: inline;

}

#LogReg {
    text-align: right;
}

http://jsfiddle.net/jonathanzuniga/66xnov5z/embedded/result/

Answer 3

https://jsfiddle.net/AkashPinnaka/0eq1f9az/embedded/result/我假设你打算让它们排成一行。显然你知道你的标志的高度。我假设您的徽标高度为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代码如下

#header {
  width:100%;
  height: 100px;
}
div#logo{
  float: left;
}
div#logo a{
 /*  line-height: 100px; */
  display: table-cell;
  vertical-align: middle;
}
div#LogReg{
  line-height: 40px;
  float: right;
}
img{
  height: 40px;
  width: 80px; /* just assumed to be 80px wide. Width doesn't matter as long as it is not too long. */
}

我假设img身高为cp的40px 这使徽标，导航菜单和登录在同一行中对齐。
如果您需要登录|注册比徽标和菜单高一点，只需将 div＃LogoReg 的行高减少到小于 40px 。

如果您想在左右两侧留一些余量，请将整个标题内容包装在另一个 div 标记中，如下所示

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

并将div＃header_in的宽度设为80％或您喜欢的内容。这会在标题的左侧和右侧显示边距。

div#header_in{
  width: 80%;
}

如果您想要任何不同的内容，请与我们联系。

Answer 4

在此处查看工作演示Centered Menu

HTML：

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

CSS：

#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;
}

试图集中我的菜单

4 个答案: