Question

我正在尝试在我的网页上制作一个横幅，顶部的部分是700px宽和80px高。

代码如下：

      <div class="container-narrow" style="heigth: 80px;">

        <img src="#" width="52" height="52" alt="my logo"  />

        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">Projects</a></li>
          <li><a href="#">Contact</a></li>
        </ul>

      </div>

的CSS：

    .container-narrow
    {
      margin: 0 auto;
      max-width: 700px;
      background: yellow;
    }

    ul
    {
      float: right;
      width: 100%;
      padding: 0;
      margin: 0;
      list-style-type: none;
    }

    a
    {
      float: right;
      width: 6em;
      color: black;
      text-decoration: none;
      padding: 0.2em 0.6em;
    }

    a:hover {color: #ccc; text-decoration: none;}

    li {display: inline;}

我想要的是图像和水平菜单在80px的中心垂直对齐。左侧的徽标和右侧的菜单。

我试图设置高度，然后用padd / margin来完成工作，但感觉很垃圾......

Answer 1

问题：

ul有一个width:100%;，如果你给它一个黑色边框，你会发现它占据了页面的宽度，这意味着它没有空间驻留在黄色内部的徽标左侧报头中。

删除此宽度将得到以下结果：http://jsfiddle.net/YBVe6/

现在由于标题有一个固定的最大宽度，即700px，因此有许多方法可以使徽标和菜单居中。

我能想到的最快方式如下：

给ul一个display: inline-block;，（删除float: right;）然后给标题text-align: center;，结果如下：http://jsfiddle.net/YBVe6/1/

如果您希望菜单显示在上半部分，只需添加vertical-align: top;。

Answer 2

首先，如果你有一个外部CSS，这是一个很好的做法，不要在你的HTML块中添加额外的CSS：

<div class="container-narrow">

并将高度样式放在css表中，因为无论如何都要为你的div设置类。

其次，如果你希望你的CSS能够正常工作，那么输入拼写错误就是一种痛苦，所以你应该使用heigth来代替height，而不是让你的div实际高80px。

第三：边缘是位置元素。使用它们！

.container-narrow
    {
        height: 80px;
        margin: 0 auto;
        max-width: 700px;
        background: yellow;
    }
img
    {
        margin-top:14px;
    }

ul
    {
        float: right;
        padding: 0;
        margin: 0;
        list-style-type: none;
        margin-top:25px;
    }

a
    {
        width: 6em;
        color: black;
        text-decoration: none;
        padding: 0.2em 0.6em;
    }

a:hover {color: #ccc; text-decoration: none;}

li {display: inline;}

修改

这主要适用于垂直对齐。如果要水平自动居中，可以使用margin:auto概念。这是可能的，因为页面不能超出浏览器宽度（浏览器高度可以扩展，因为您可以使用滚动作为默认行为）。

如何设置横幅的高度并将其内容垂直对齐到中心？

2 个答案: