在响应式设计中为“顶部”和“底部”提供与“右”和“左”的边距相同的边距答案

【问题标题】：Give same margin to 'top' and 'bottom' as margin of 'right' and 'left' in responsive design在响应式设计中为“顶部”和“底部”提供与“右”和“左”的边距相同的边距
【发布时间】：2013-04-06 19:24:25
【问题描述】：

我有一个具有动态宽度的容器 div，它会根据屏幕分辨率而变化。在这样的 div 中，我有另一个具有固定高度和宽度的元素。我可以给这样的元素一个margin: 0 auto; 并在中间水平对齐它，但是这个技巧不能让它在中间垂直对齐，因为容器 div 的高度保持不变（它不是固定高度，它取决于里面的内容分）。因此，当用户更改分辨率时，我想以某种方式应用与左右、顶部和底部相同的边距。因此所有边应该有相同的动态边距？

如果有基于 css 的解决方案会很好，但如果不可能，jQuery 也很好。

基本上我需要计算右侧或左侧的边距并将这些值应用于顶部和底部边距。

【问题讨论】：

您是否尝试过使用百分比而不是固定值？
里面的元素需要有固定的值，因为容器的高度取决于它的内容，它也必须有固定的高度。

标签： javascript jquery html css

【解决方案1】：

我认为您在这里不需要 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 属性、它的用途和局限性。

更新

根据您的 cmets，如果您想（字面意思）应用左边距或右边距作为上边距，您可以使用以下 jQuery 执行此操作：

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

【讨论】：

也考虑到table-cell
你真的不应该使用table-cell，除非你真的在使用表格——OP声明他不是（间接地）。
试过了，现在顶部和底部似乎没有任何边距。我认为垂直对齐仅适用于固定宽度（在这种情况下与内部元素高度相同）？所以它不会真的设置边距？
@ZacharyKniebel display: table-cell 是一个 CSS2 指令，可用于任何元素，非常适合垂直对齐事物（以及具有相同高度并保持在同一行的块）。它与 table、td 和 th 元素的语义无关，因为它是 CSS。如果父元素有display: table，它可能会更健壮
@FelipeAls - 我只是说应该避免使用它，而不是说它不能使用。

【解决方案2】：

如果你有固定的内部元素的宽度和高度，你可以使用这个小技巧

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

【讨论】：

你从哪里得到-250px？
内部元素的尺寸为 300x250，如果尺寸不是正方形，我该如何使用它？
看看我的解决方案 - 无论尺寸如何，它都应该可以工作
它适用于宽度，但是当我调整顶部和底部的窗口边距时仍然保持不变，并且不会与左右两侧的边距一起动态变化。
我不认为这是可以实现的，我需要它来获取左侧或右侧边距的值并将该值应用于顶部和底部边距。

【解决方案3】：

这使容器 div 以恒定的边距浮动。

<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/

【讨论】：