同样的边距为'top'和& # 39;底部# 39;margin 'right'和& #

Give same margin to 'top' and 'bottom' as margin of 'right' and 'left' in responsive design

本文关键字：margin right 底部 top      更新时间：2023-09-26

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

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

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

我认为这里不需要javascript/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
    });
});

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

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

这给了一个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/

相关文章：