1

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

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

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

4

3 回答 3

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;
}

看看这篇文章。它很好地描述了该vertical-align属性、其用途和局限性。


更新

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

$(document).ready(function() {
    var $ele = $("#centered-element");
    var marginL = $ele.css("margin-left");
    $ele.css({
        "margin-top": marginL,
        "margin-bottom": marginL
    });
});
于 2013-04-14T17:56:46.800 回答
0

这使容器 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/

于 2013-04-14T18:19:30.863 回答
0

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

#outside {
    position: relative;
}
#inside {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 500px;
    width: 500px;
    margin-top: -250px;
    margin-left: -250px;
}
于 2013-04-14T17:54:37.440 回答