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

【问题标题】：How can i set height of my banner and vertically align its content to center?如何设置横幅的高度并将其内容垂直对齐到中心？
【发布时间】：2013-06-13 20:13:56
【问题描述】：

我正在尝试在我的网页上制作横幅，顶部的部分宽 700 像素，高 80 像素。

代码如下：

      <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 的中心。左侧是徽标，右侧是菜单。

我尝试设置高度，然后填充/边距以完成工作，但感觉很垃圾......

【问题讨论】：

垂直？还是说“向左，向右”是水平的？ ;>
您为什么不想使用边距来正确放置它，这就是他们所做的，尤其是当您使用固定设计时（横幅高度为 80 像素，图像为 52 像素，因此 28 像素的空白是14px 的边距顶部...）
你想要这样的东西吗？ jsfiddle.net/uKWM4

标签： html css

【解决方案1】：

问题：

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

删除这个宽度会得到以下结果：http://jsfiddle.net/YBVe6/

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

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

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

如果你想让菜单显示在上部，只需添加vertical-align: top;即可。

【讨论】：

【解决方案2】：

首先，如果您有外部 CSS，最好不要在 HTML 块中添加额外的 CSS：

<div class="container-narrow">

并将高度样式放入您的 css 表中，因为无论如何您的 div 都有一个类设置。

其次，如果你想让你的 CSS 正常工作，打错字会很痛苦，所以你应该使用 height 而不是 heigth，这会让你的 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 概念。这是可能的，因为页面不能超出浏览器宽度（浏览器高度可以扩展，因为您可以将滚动作为默认行为）。

【讨论】：