Html 底部对齐菜单与标志？

我是一名网络开发新手，正在开发一个使用HTML和CSS的网站。我的菜单有问题，我希望它与我的日志水平底部对齐，但它似乎在顶部对齐

这是我的代码，请建议解决方案

HTML:

<hgroup>
    <div id="Head">
        <img src="img/logo.png" width="380" height="100" alt="Logo" />
    </div>
    <div id="navcontainer">
        <ul>
            <li><a href="#">HOME</a>
            </li>
            <li><a href="#">ABOUT</a>
            </li>
            <li><a href="#">PROJECTS</a>
            </li>
            <li><a href="#">GALLERY</a>
            </li>
            <li><a href="#">CONTACT</a>
            </li>
        </ul>
    </div>
</hgroup>

---

你可以试试类似的东西

<div class="header_container">
  <div id="Head"> 
    <img src="img/logo.png" width="380" height="100" alt="Logo" /> 
   </div> 
   <div class="navcontainer">
      <div id="nav">
        <ul> 
           <li><a href="#">HOME</a></li> 
           <li><a href="#">ABOUT</a></li> 
           <li><a href="#">PROJECTS</a></li> 
           <li><a href="#">GALLERY</a></li> 
           <li><a href="#">CONTACT</a></li> 
        <ul> 
      </div> 
    </div>
</div>

但是。。这不是一个好的html/css

---

我建议你学习。它可以帮助您不费吹灰之力地构建一个好的CSS。

好吧，基于您提供的有限知识和缺乏支持最终结果或目标的图像，我提供了一个没有任何浮动和硬编码维度的示例。这个例子所需要的只是使用display:table cell；在两个div容器上，如下所示：

#Head 
{ 
  display: table-cell;
  height:150px; 
} 

#navcontainer{
  display: table-cell;
}

以下是一个工作示例：

---

清晰明确地定义你想要实现的目标将有助于你更好地前进。

你的期望是这样的吗

试试这个

<style>
hgroup{
    text-align:center;  
}

/*------------------------*/
 #navcontainer {
    margin-top: 50px;
}
#navcontainer ul {
    margin: 0;
    padding: 0;
    list-style-type: none;    
}
#navcontainer ul li {
    display: inline;
}
#navcontainer ul li a {
    text-decoration: none;
    padding: .2em 1em;
    color:#000;
    font-size:18px;
}
#navcontainer ul li a:hover {
    color:#008c00;
}</style>
<hgroup>
    <div id="Head" >
        <img src="img/logo.png" width="380" height="100" alt="Logo" />
    </div>
    <div id="navcontainer">
        <ul>
            <li><a href="#">HOME</a>
            </li>
            <li><a href="#">ABOUT</a>
            </li>
            <li><a href="#">PROJECTS</a>
            </li>
            <li><a href="#">GALLERY</a>
            </li>
            <li><a href="#">CONTACT</a>
            </li>
        </ul>
    </div>  
</hgroup>

---

在旁注上，你的头在css中设置为宽度：200px，但你的图像大小是380px？我很困惑。你是想让我们把菜单放在商标下面吗？或者您希望在其下方对齐，而不是在其旁边或上方对齐？无论如何，我建议你应该在CSS中使用你的徽标作为背景图像，而不是将其称为图像。它可以防止出现问题。感谢您的解决方案。实际上，我希望徽标和菜单水平排列成直线，菜单与底部对齐，而不是与徽标顶部对齐。询问实际问题更合适。与IE8相关-如果display:table单元格元素的父容器具有display:table属性和表布局：fixed，请参见此示例和此相关问题-

#Head 
{ 
  display: table-cell;
  height:150px; 
} 

#navcontainer{
  display: table-cell;
}

<style>
hgroup{
    text-align:center;  
}

/*------------------------*/
 #navcontainer {
    margin-top: 50px;
}
#navcontainer ul {
    margin: 0;
    padding: 0;
    list-style-type: none;    
}
#navcontainer ul li {
    display: inline;
}
#navcontainer ul li a {
    text-decoration: none;
    padding: .2em 1em;
    color:#000;
    font-size:18px;
}
#navcontainer ul li a:hover {
    color:#008c00;
}</style>
<hgroup>
    <div id="Head" >
        <img src="img/logo.png" width="380" height="100" alt="Logo" />
    </div>
    <div id="navcontainer">
        <ul>
            <li><a href="#">HOME</a>
            </li>
            <li><a href="#">ABOUT</a>
            </li>
            <li><a href="#">PROJECTS</a>
            </li>
            <li><a href="#">GALLERY</a>
            </li>
            <li><a href="#">CONTACT</a>
            </li>
        </ul>
    </div>  
</hgroup>