垂直对齐div（无表） [英] Vertically align div (no tables)

问题描述

我可以水平对齐一个div和所有的内容看起来不错。
寻找垂直对齐一个不包含任何表的div。
我试图将margin位置设置为#container
内的一些负值，但这种工作。

snippetdata-lang =jsdata-hide =falsedata-console =falsedata-babel =false>

  body {background：＃777; / * grey * / text-align：center;}＃container {margin：0 auto; width：968px; text-align：left;}＃toptab {background：＃f77; / * red * / height：14px; width：968px;}＃middletab {background：＃7f7; / * green * / width：968px;}＃data {width：948px; / * 948的框加我们需要20更多px处理padding * / padding-left：10px; padding-right 10px;}＃bottomtab {background：＃77f; / * blue * / height：14px; width：968px;}  

 < div id = > < div id =toptab>< / div> < div id =middletab> < div id =data>快速的棕色狐狸跳过了大红熊。快速的棕色狐狸跳过了大红熊。快速的棕色狐狸跳过了大红熊。快速的棕色狐狸跳过了大红熊。快速的棕色狐狸跳过了大红熊。快速的棕色狐狸跳过了大红熊。快速的棕色狐狸跳过了大红熊。快速的棕色狐狸跳过了大红熊。快速的棕色狐狸跳过了大红熊。快速的棕色狐狸跳过了大红熊。快速的棕色狐狸跳过了大红熊。快速的棕色狐狸跳过了大红熊。 < / div> < / div> < div id =bottomtab>< / div>< / div>  

运行上面的代码片段，然后点击全页查看它当前的外观。
基本上，它看起来水平很大，但现在我需要它也垂直在页面中心。

我想垂直对齐的元素是＃容器div。效果将迫使整个div和所有子div不仅水平对齐，而且垂直。我知道这是可能的，我知道Andy Budd发布了这样的解决方案，但它似乎不适合我。

解决方案

除非您能够显式设置容器的高度（这种情况看起来不是这样），否则会出现无跨浏览器解决方案，用于垂直居中您的DIV容器。

使用表格是完全可行的，但您已经注意到这不能使用。

如果javascript是一个选项，我们可以很容易地为您补救。已存在用于垂直对齐容器的jQuery插件。

 （function（$）{
 // VERTICALLY ALIGN FUNCTION 
 $ .fn.vAlign = function（）{
 return this.each（function（i）{
 var ah = $（this）.height（）; 
 var ph = $（this）.parent（）。height（）; 
 var mh =（ph  -  ah）/ 2; 
 $（this）.css（'margin-top'，mh）; 
}）; 
}; 
}）（jQuery）; 
  

您可以垂直对齐一个DIV块，如下：

  $（'＃example'）。vAlign（）; 
  

取自简单垂直对齐插件。

I can horizontally align a div and all the content looks nice. Looking to vertical align a div that does not contain any tables. I tried setting margin positions to some negative values inside of the #container but that sort of worked. I know CSS isn't supporting this yet?

Here is my markup:

body
{
    background: #777; /* gray */
    text-align: center;
}

#container 
{ 
    margin: 0 auto;
    width: 968px;
    text-align: left;
}

#toptab
{
    background: #f77; /* red */
    height: 14px;
    width: 968px;
}

#middletab
{
    background: #7f7; /* green */
    width: 968px;
}

#data
{
    width: 948px; /* 948 for the box plus we need 20 more px to handle the padding */
    padding-left: 10px; 
    padding-right 10px;
}

#bottomtab
{
    background: #77f; /* blue */
    height: 14px;
    width: 968px;
}

<div id="container">
    <div id="toptab"></div>
    <div id="middletab">
        <div id="data">
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
        </div>
    </div>
    <div id="bottomtab"></div>
</div>

Run the snippet above and click "full page" to see how it currently looks. Basically, it looks great horizontally, but now I need it to also center vertically in the page.

The element that I want to align vertically is the #container div. The effect would force the entire div and all sub divs to not only be horizontally aligned but also vertically. I know this is possible and I know Andy Budd posted such a solution but it doesn't seem to work for me.

解决方案

Unless you have the ability to explicitly set the height of your container (which doesnt look like that's the case), there is no cross browser solution for vertically centering your DIV container.

Using a table is completely viable, but you have noted that this cannot be used.

If javascript is an option, we could easily remedy this for you. A jQuery plugin already exists for vertically aligning a container.

(function ($) {
    // VERTICALLY ALIGN FUNCTION
    $.fn.vAlign = function() {
        return this.each(function(i){
            var ah = $(this).height();
            var ph = $(this).parent().height();
            var mh = (ph - ah) / 2;
            $(this).css('margin-top', mh);
        });
    };
})(jQuery);

And you would vertically align a DIV block like so:

$('#example').vAlign();

Taken from Simple Vertical Align Plugin.

这篇关于垂直对齐div（无表）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！