垂直对齐包装

Question

由于无聊，我正在搞乱一个网站，并试图弄清楚如何垂直对齐我的包裹，但我在大声笑方面失败了。我已经水平对齐它，只需要帮助垂直对齐它。 （是的，我试过vertical-align:middle，但是没用）。

    * { margin:0;  padding:0; }
    html { height:100%; }
    body { background:/*url(images/bg.jpg)*/#14181a; }
    #wrap { width:960px;  height:55%;  margin:0 auto;  background:#293033; }

    <div id="wrap">
    <div id="logo"></div>
    <div id="navgation"></div>
    <div id="content"></div>
    <div id="footer"></div>
    </div>

Answer 1

如果您不必支持旧版浏览器，则可以使用显示框。我有以下课程：

.vertically_centered {
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;

  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;

  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
}

然后把任何东西都放在那里。由于您希望“wrap” div 垂直居中，请尝试将 vertical_centered 类分配给您的 body 元素。

有关使用灵活框的更多详细信息，您可能需要查看这篇文章：http://www.css3.info/introducing-the-flexible-box-layout-module/

Answer 2

如果要垂直对齐 div 对象，请使用 position:relative 和顶部值，如下所示：

#wrap {width:960px; height:55%; margin:0 auto; background:#293033; position:relative; top:20px;}

如果您想将#wrap div 内的文本与特定的垂直对齐方式对齐，例如动态上标，请在文本容器上使用vertical-align：

#wrap span {font-size:14px; line-height:16px; vertical-align:2px;}

Answer 3

垂直对齐可以使用表格布局来完成。您需要一个显示为表格单元格的元素，它的父级应显示为表格。然后你可以添加垂直对齐，它会工作。

首先，这是一个展示它的 js fiddle。它将包裹的内容集中在包裹内！ （如果我误解了，您需要将包装本身居中，请问我会编辑）http://jsfiddle.net/YWdDC/1/

    * { margin:0;  padding:0; }
    html { height:100%; }
    .wrap-wrapper {
        background: url('images/bg.jpg') #14181a;
        display: table;
     }
    .wrap {
        width:960px;
        height:300px;
        margin:0 auto;
        background:#293033;
        display: table-cell;
        vertical-align: middle;
    }​

    <div class="wrap-wrapper">
        <div class="wrap">
            <div id="logo">Logo</div>
            <div id="navgation">Nav</div>
            <div id="content">Content</div>
            <div id="footer">Footer</div>
        </div>
    </div>​

Answer 4

您的问题正是this post 中讨论的问题。

方法一

下面的例子做了两个（非平凡的）假设。如果你可以的话 满足这些假设，那么这个方法适合你：

1. 您可以将想要居中的内容放在一个块内，并为该内部内容块指定一个固定高度。
2. 可以绝对定位此内容。 （通常没问题，因为内容居中的父元素仍然可以流动。

如果你能接受以上必需品，解决办法是：

1. 将父容器指定为 position:relative 或 position:absolute。
2. 在子容器上指定一个固定高度。
3. 在子容器上设置 position:absolute 和 top:50% 以将顶部向下移动到父容器的中间。
4. 设置 margin-top:-yy ，其中 yy 是子容器高度的一半，以向上偏移项目。

...

方法二

此方法要求您能够满足以下条件 条件：

1. 您只有一行文本要居中。
2. 您可以为父元素指定固定高度。

如果你能接受以上必需品，解决办法是：

1. 将父元素的行高设置为您想要的固定高度。

我发现方法 2 通常是垂直对齐最简单和最一致的方法，尽管它仅限于单行，这通常很好，因为我的大多数垂直对齐需求都是针对只需要单行的菜单项.