HTML/CSS中心在一個div一個div垂直

我有一個HTML/CSS的網站，我有幾個家長和孩子div的。我需要一個腳本（jQuery的？）是發現父母和孩子DIV高度的，並添加必要的居中父孩子的CSS ...

<div class="parent"> 
<div class="child"> 
</div> 
</div> 
..... 
<div class="parent"> 
<div class="child"> 
</div> 
</div> 
.... 
<div class="parent"> 
<div class="child"> 
</div> 
</div> 

<SCRIPT> 
??? 
</SCRIPT>

感謝所有...

來源

2013-02-21 Filippo Rivolta

Ciao Filippo！你可以請張貼你到目前爲止嘗試過的任何jQuery嗎？所以我們不僅可以告訴你如何去做，還可以瞭解你已經知道的事情，並希望 - 引導你更多的信息。此外，如果您的孩子總是會有固定的身高（或者可能因元素而異） – 2013-02-21 10:51:42

考慮將其他類添加到父母和孩子的div中，然後使用垂直線對齊css屬性。 – samayres1992 2013-02-21 10:55:09

你可以試試這個jQuery代碼：

$(document).ready(function() { 
    var childHeight = $('.child').css('margin-top', function() { 
    var childHeight = $(this).height(); 
    var parentHeight = $(this).parent().height(); 
    return ((parentHeight - childHeight)/2); 
    }); 
});

基本上，該文件已經被加載後，
您檢索與類孩子和相對的父親，
你需要這個來計算孩子的邊距值的所有DOM元素的高度OBJ。

來源

2013-02-21 11:08:58 Alessandro

是的，它非常好，謝謝 – 2013-02-21 13:06:12

如果我理解的UI認爲ü可以用此位的CSS做到這一點：

.parent { 
    height: auto; 
    overflow: hidden; /* This actually makes height auto */ 
    padding: 10px 0; /* exmaple of 10px up and down that will actully center it with some space IF space is needed*/ 
}

來源

2013-02-21 10:56:14

他想要JavaSript，而不是CSS。 – Kannika 2013-02-21 11:17:51

爲什麼當你用純CSS解決問題時你會問JS。 – 2013-02-21 11:30:22

有時候，他需要javascript來處理其他事情。所以你應該建議使用CSS的javascript/jQuery是最好的。 – Kannika 2013-02-21 11:33:14

沒有必要在這裏使用jQuery的，你可以使用與marginoverflow:auto組合顯示在下面的鏈接。

Working Fiddle

.parent{overflow:auto;width:100px;height:100px;background-color:green;margin-bottom:10px;} 
.child{width:50px;height:50px;background-color:blue;margin:25px;}

您也可以替換這裏百分比像素。

這也可以使用float或display屬性而不是overflow:auto來完成。

來源

2013-02-21 10:56:43

這隻會在寬度和高度固定的情況下起作用。 – 2013-02-21 11:26:52

不需要，嘗試與百分比相同..它將起作用。 – 2013-02-21 11:27:30

@MatRichardson檢查此http://jsbin.com/axikuz/6/edit（垂直對齊） – 2013-02-21 11:31:45

另一種方法可以將父div的display屬性設置爲table-cell。下面是代碼：

<div style="display:table-cell; height:200px; border:1px solid red; vertical-align:middle; align: center;"> 
    <div style="height:100px; border:1px solid blue;">The content</div> 
</div>

這是什麼樣子：

http://screencast.com/t/6kB9ec1uV

你並不需要一個腳本，除非你想做些別的事情，除了中心的孩子股利。祝你有美好的一天！

來源

2013-02-21 10:58:52

使用jQuery：

LIVE DEMO

$('.parent').each(function(){ 

    var $pa = $(this); 
    var $ch = $pa.find('.child'); 
    var paH = $pa.innerHeight(); 
    var chH = $ch.innerHeight(); 

    $ch.css({marginTop: (paH-chH)/2}); 

});

如果你有你.child內的圖像，我建議你assing到圖像的height=""屬性，或者把JS裏面一個函數並在其上調用它$(window).load(function(){ /*here*/ });

來源

2013-02-21 11:00:04

非常乾淨的解決方案！獎勵！但是隻有當問題不能用直接的CSS解決時，我們才應該使用腳本。 – 2013-02-21 11:02:13

@RomiHalasz我同意你的看法，這就是爲什麼我用jQuery開始我的答案：* :) – 2013-02-21 11:03:00

我同意，但我不知道一個靈活的方式來做到這一點，只有用css – Alessandro 2013-02-21 13:02:26

HTML/CSS中心在一個div一個div垂直

回答

相關問題