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

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

首先，这里有一个js小提琴，显示它在行动。它将包装内容集中在包装内！（如果我误解了你需要将包裹本身放在中心，只要问我并且我会编辑）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 3

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

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

您的问题是this post中讨论的确切问题。

方法1

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


您可以将要居中的内容放在块中，并为该内部内容块指定固定高度。

绝对定位此内容是可以的。（通常很好，因为内容居中的父元素仍然可以流动。

如果您能接受上述必需品，解决方法是：


将父容器指定为position：relative或position：absolute。

在子容器上指定固定高度。

设置位置：绝对值和顶部：子容器上的50％，将顶部向下移动到父级的中间位置。

设置margin-top：-yy，其中yy是子容器高度的一半，以抵消项目。

...

方法2

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


您只需要一行文本。

您可以为父元素指定固定高度。

如果您能接受上述必需品，解决方法是：


将父元素的行高设置为所需的固定高度。

我发现方法2通常是最简单和最一致的垂直对齐方式，虽然它仅限于一条线，这通常很好，因为我的大多数垂直对齐需要的是菜单项，无论如何只需要一条线。

垂直对齐包装

4 个答案: