Question

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

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

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

Answer 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属性，它的用法和局限性。

<强>更新

根据您的评论，如果您希望（字面上）应用左边距或右边距也是上边距，您可以使用以下jQuery执行此操作：

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

Answer 2

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

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

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

在响应式设计中，将“顶部”和“底部”作为“右”和“左”的边距给予相同的边距

3 个答案: