垂直對齊div（無表）

我可以水平對齊div，所有內容看起來不錯。尋找垂直對齊不包含任何表的div。我試圖設置邊距位置的一些負值＃容器內，但那種工作。我知道CSS不支持這個呢？垂直對齊div（無表）

這裏是我的標記：

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>

運行上面的代碼片斷，然後單擊「整頁」，看它目前的樣子。基本上，它看起來水平很好，但現在我需要它也垂直居中在頁面中。

我想要垂直對齊的元素是#container div。這種效果會迫使整個div和所有的子div不僅要水平對齊，還要垂直對齊。我知道這是可能的，我知道安迪巴德發佈了這樣的解決方案，但它似乎並沒有爲我工作。

來源

2009-12-15 JonH

你的意思是垂直分佈/對齊或只是圍繞什麼在垂直顯示頁？ – 2009-12-15 19:28:48

@Eric最終結果是內容的圓形框應位於頁面中間。截至目前，您看到的內容是居中，但只集中在頂部。我需要將其直接居中在頁面中間。 – JonH 2009-12-15 19:31:27

據我所見，你必須做一些JavaScript，除非你想要一個固定高度的頁面，我懷疑。 – 2009-12-15 19:55:04

除非你有能力明確地設置你的容器的高度（這看起來不是這種情況），有沒有跨瀏覽器解決方案垂直居中您的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();

從Simple Vertical Align Plugin服用。

來源

2009-12-15 19:36:16

@cballou沒有辦法，我能夠告訴容器的高度，它可以變化:(。但是，如果我假設它的最大值是500px，那麼使用標記提供了我可以做什麼？ – JonH 2009-12-15 19:39:21

我試了這個沒有運氣＃容器 { \t餘量：0自動; \t width：968px; \t text-align：left; \t position：absolute; \t top：50％; \t left：50％; \t身高：484px; \t margin-top：-9em;/*設置爲負數1/2的高度*/ \t margin-left：-15em;/*設置爲您的寬度的負數1/2 */ } – JonH 2009-12-15 19:45:05

@JonH：如果它沒有*固定*高度，則無法在不使用javascript的情況下使其垂直居中。 – 2009-12-15 19:48:57

看看Vertical Centering With CSS或Vertically center content with CSS或CSS Vertical Centering。第一篇參考文獻的方法3與CSS vertical center using float and clear相同。

而且這肯定是一個好主意，用服務來測試結果類似browsershots.org

編輯：我修改你的CSS和標記來實現方法3：

CSS：

* { 
    margin:0; 
    padding:0; 
} 

html, 
body { 
    height: 100%; 
} 

body { 
    text-align:center; 
} 

#floater { 
    float: left; 
    height:50%; 
    margin-bottom: -100px; 
} 

#container 
{ 
    clear:both; 
    position: relative; 
    margin: 0 auto; 
    width:968px; 
    text-align: left; 
    height: 200px; 
} 

...

加價：

<body> 
<div id="floater"></div> 
<div id="container"> 

...

我在這種方法中看到的缺點是，帶有CSS的您必須事先知道您的內容的高度爲，以便您可以將一半高度的負餘量應用於浮動元素。在這個例子中，我選擇了200px。

See it in action。

來源

2009-12-15 19:31:23

我不需要任何我閱讀過的文章。我似乎無法讓它使用負邊際值。 – JonH 2009-12-15 19:32:11

如果themeforest不可用，則此響應將不足。您是否介意將說明轉移到您的答案中，並將原作者的功勞歸功於此。這樣人們就不必一頁一頁地跳出來衡量回應的價值了嗎？ – Sampson 2009-12-15 19:32:51

@JonH>給一個男人一條魚... – 2009-12-15 19:39:13

有幾種方法可以做到這一點，都有妥協。

使用position:absolute，固定高度和overflow:auto。
使用display:table，display:table-cell和vertical-align:middle
使用JavaScript

我想選擇＃2是相當不錯的。

編輯：我不認爲選項2將在IE中工作。如果你想保持高度動態，你可能會被JavaScript卡住。

來源

2009-12-15 19:35:40

妥協跨瀏覽器兼容性：整個IE系列是精確的。 – 2009-12-15 19:36:50

@cballou，ya我只是想到了這一點，正在編輯我的文章，因爲你離開你的評論：P – 2009-12-15 19:38:34

如果您的主容器的高度不穩定，您唯一可靠的選擇是使用JavaScript（當然，這裏「可靠」是有爭議的）。在JavaScript中，您必須首先找到容器的高度，然後查找窗口高度並相應地調整頂部偏移量。這裏是你會怎麼做jQuery中：

$(function() { 
    $(window).resize(function() { 
     var top = $(window).height()/2 - $('#content').height()/2; 
     top = top < 0 ? 0 : top; 
     $('#content').css('top', top); 
    }); 
    $(window).resize(); 
});

而CSS，使其工作：

#content { 
    position: absolute; 
    /* Everything else is optional: */ 
    width: 960px; 
    margin: 0 auto; 
}

和HTML：

... 
<body> 
    <div id="#content">Content here</div> 
</body> 
</html>

這仍然是相當簡單的，而且會如果用戶啓用了JavaScript，則工作。

來源

2009-12-15 19:46:20

我唯一抱怨這個功能是它只會正常工作，如果元素是身體標籤的直接孩子。我發佈的插件利用它的父容器來計算居中位置。 – 2009-12-15 19:56:42

純CSS，這是只有可能的，如果div有一個固定height。然後，您可以position它absolute並設置其top和left到50%和margin-top和margin-left分別其width和height的負半。

這是SSCCE，只是copy'n'paste'n'run。邊框純粹是表現性的，其餘的樣式是必需的。

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>SO question 1909753</title> 
    </head> 
    <style> 
     #content { 
      position: absolute; 
      width: 300px; 
      height: 200px; 
      top: 50%; 
      left: 50%; 
      margin-left: -150px; /* Negative half of width. */ 
      margin-top: -100px; /* Negative half of height. */ 
      border: 1px solid #000; 
     } 
    </style> 
    <body> 
     <div id="content"> 
      content 
     </div> 
    </body> 
</html>

如果有一個固定高度的沒辦法，那麼你就需要掌握Javascript和與事實住客戶端會看到頁面加載過程中快速被轉移到中間的DIV，這可能會導致一個「跆拳道？」經驗。

來源

2009-12-15 19:50:34 BalusC

+1對那個 – JonH 2009-12-15 19:55:25

我認爲有可能沒有display: table。

這是例子：

HTML：

<div class="notificationArea"> 
    something 
</div>

CSS：

.notificationArea 
{ 
    position: absolute; 
    top: 50%; 
    bottom: 50%; 
    right: 50%; 
    left: 50% 
}

來源

2011-03-04 23:32:22 drasto

你是什麼意思？在你的CSS中有一個「display：table」規則，它的div並不是垂直居中...... – 2011-03-05 22:19:52

該演示出於某種原因顯示了另一個示例。我用acctual代碼取代了它。 – drasto 2011-03-07 10:57:20

做一個div容器具有風格display: table和使用的樣式vertical-align: top上是display: inline-block

內部元素

工作演示在http://jsfiddle.net/uzcrt/

來源

2012-05-30 19:54:23

CSS類在屏幕的中間對齊元素：

.middle{ 
    position: absolute; 
    top: 50%; /*50% from top*/ 
    left: 50%; /*50% from left*/ 

    /*remove 50% of element width and height to align the element center in the position*/ 
    transform: translateY(-50%) translateX(-50%); 
}

現在，這個類添加到HTML元素

來源

2017-03-22 11:54:03

垂直對齊div（無表）

回答

相關問題