垂直对齐包装

我搞砸了一个网站出来的无聊，并试图找出如何垂直对齐我的包装，我失败了哈哈。我已经水平对齐它，只需要帮助垂直对齐它。（是的，我试过垂直对齐：中间，但它不起作用）。垂直对齐包装

* { 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>

来源

2012-04-21 D SPECIAL

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

首先，这是一个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>

来源

2012-04-21 01:38:24 alt

跨浏览器？但IE7不支持table，table-row和table-cell，显然是这样的：http://www.quirksmode.org/css/display.html – Volomike 2012-04-22 20:28:37

好的一点，实际上。我会编辑我的答案。 – alt 2012-04-22 20:44:54

如果要垂直对齐一个div对象，使用的位置是：相对和顶部的值，如所以：

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

如果你要对齐的#wrap格中的文本与特定的垂直对齐，如动态标，使用文本容器垂直对齐：

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

来源

2012-04-21 01:52:23 Lazerblade

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

.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; 
}

然后把几乎任何东西放在里面。既然你想让“包裹”div垂直居中，请尝试将vertical_centered类分配给你的body元素。

有关使用灵活的盒子更详细的信息，你可能想看看这篇文章：http://www.css3.info/introducing-the-flexible-box-layout-module/

来源

2012-04-21 01:55:17 okor

你的问题是在this post讨论的具体问题。

方法1

以下示例使两（非平凡）的假设。如果你能满足这些假设，那么这种方法是你：

你可以把要居中块内，指定该内部内容块的固定高度的内容。

绝对定位此内容是正确的。（一般细，由于在其内部的内容为中心的父元素还可以在流动

如果可以接受上述用品，该解决方案是：

指定作为位置父容器：相对或立场：孩子容器上50％的移动自上而下父中间

：绝对

子容器上指定一个固定的高度

设置位置：绝对和顶部。设置m argin-top：-yy其中yy是子容器高度的一半，用于将项目偏移。

...

方法2

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

您有文字的，你希望只有一行居中。

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

如果你能接受上述生活必需品，解决的办法是：

设置父元素到你想要的高度固定的行高。

我找到方法2一般是垂直对齐最简单，最一致的方式，但它仅限于一个单一的线，这通常是很好的，因为我的大部分垂直对齐的需求是其唯一的菜单项无论如何都需要一条线。

来源

2012-04-21 02:11:49

垂直对齐包装

回答

相关问题