在響應式設計中爲'右'和'左'的邊緣賦予'頂部'和'底部'相同的邊距

我有一個容器div，它具有動態寬度，它根據屏幕分辨率而變化。在這樣的div裏面我有另一個固定高度和寬度的元素。我可以給這樣的元素一個margin: 0 auto;並在中間水平對齊，但是這個技巧無法在中間垂直對齊，因爲容器div的高度保持不變（它不是固定的高度，它取決於div內的內容）。因此，當用戶更改分辨率時，我想以某種方式將右側和左側相同的邊距應用於頂部和底部。因此，各方應該有相同的動態餘量？在響應式設計中爲'右'和'左'的邊緣賦予'頂部'和'底部'相同的邊距

這將是一個很好的基於CSS的解決方案，但如果這是不可能的，jQuery也很好。

基本上我需要的是計算右邊或左邊的邊距，並將這些值應用到頂部和底部邊距。

來源

2013-04-14 Ilja

您是否嘗試過使用百分比代替固定值？ – Nic

裏面的元素需要有固定的值，而容器的高度取決於它的內容，它也必須有固定的高度。 – Ilja

我不認爲你在這裏需要一個javascipt的/ jQuery的解決方案。你可以用CSS來做到這一點。

調查vertical-align屬性。您需要查看其警告和要求，因爲它需要的元素爲inline/inline-block。

什麼你會想是這樣的：

#centered-element { 
    display: inline-block; 
    height: 300px; //your fixed height 
    width: 250px; // your fixed width 
    margin-left: auto; 
    margin-right: auto; 
    vertical-align: middle; 
}

看看this article。它對vertical-align屬性及其用途和侷限性進行了很好的描述。

UPDATE

根據您的意見，如果你想（字面）申請的左邊或右邊距也被頂邊距，您可以使用下面的jQuery的做到這一點：

$(document).ready(function() { 
    var $ele = $("#centered-element"); 
    var marginL = $ele.css("margin-left"); 
    $ele.css({ 
     "margin-top": marginL, 
     "margin-bottom": marginL 
    }); 
});

來源

2013-04-14 17:56:46

同樣考慮到'table-cell' – FelipeAls

除非你實際使用表格，否則你真的不應該使用'table-cell' - 操作系統聲明他不是（間接）。 –

試過了，現在似乎沒有任何保證金的頂部和底部。我認爲垂直對齊只適用於固定寬度（在這種情況下與內部元素高度相同）？所以它不會真的設定利潤率？ – Ilja

，如果你有固定的寬度和內部元件的高度，你可以使用這個小動作

#outside { 
    position: relative; 
} 
#inside { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    height: 500px; 
    width: 500px; 
    margin-top: -250px; 
    margin-left: -250px; 
}

來源

2013-04-14 17:54:37 monkeyinsight

你從哪裏得到「-250px」？ –

裏面的元素的尺寸爲300x250，我如何使用它的尺寸不是方形？ – Ilja

只需看看我的解決方案 - 它應該工作，不管尺寸如何 –

這給出了一個浮動的恆定餘量容器股利。

<div>Content</div> 

div { 
    background: #282; 
    width:90%; 
    height:90%; 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    margin:auto; 
}

http://jsfiddle.net/djwave28/tATZU/1/

除了參照的內容，你可以把這個容器內。在超過高度時，可以應用CSS中的滾動功能。如果不是，窗口的滾動功能將接管。

http://jsfiddle.net/djwave28/tATZU/2/

來源

2013-04-14 18:19:30 Daniel