1

I've got a container div which has got dynamic width, it changes depending on screen resolution. Inside such div I have another element with fixed height and width. I can give such element a margin: 0 auto; and align it horizontally in the middle, however this trick doesn't work to align it vertically in middle, as height of container div remains same (it's not fixed height, it depends on content inside the div). Therefore I'd like to somehow apply same margins as go to right and left, to top and bottom, when users change resolution. Therefore there should be same dynamic margin on all sides?

It would be good to have css based solution, but if that is not possible, jQuery is good as well.

Basically what I need is to calculate margins of either right or left side and apply those values to top and bottom margins.

2
  • Have you experimented with using a percentage instead of a fixed value?
    – Nic
    Apr 14, 2013 at 17:54
  • element that's inside need's to have fixed values, and as containers height is dependant on it's content, it kinda has to have fixed height as well.
    – Ilja
    Apr 14, 2013 at 17:58

3 Answers 3

1

I don't think you need a JavaScipt/jQuery solution here. You can do this with just CSS.

Look into the vertical-align property. You will need to review its caveats and requirements, as it requires elements to be inline/inline-block.

What you will want is something like:

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

Take a look at this article. It gives a pretty good description of the vertical-align property, its use and its limitations.


UPDATE

Based on your comments, if you want to (literally) apply the left or right margin to also be the top margin, you can do this using the following jQuery:

$(document).ready(function() {
    var $ele = $("#centered-element");
    var marginL = $ele.css("margin-left");
    $ele.css({
        "margin-top": marginL,
        "margin-bottom": marginL
    });
});
13
  • Also taken into account with table-cell
    – FelipeAls
    Apr 14, 2013 at 17:59
  • You really shouldn't be using table-cell unless you're actually using tables - the OP states that he is not (indirectly). Apr 14, 2013 at 18:00
  • Tried it out, now there doesn't seem to be any margin's on top and bottom. I thought vertical align only works with fixed width (in this case same as inner elements height)? So it wouldn't really set margins?
    – Ilja
    Apr 14, 2013 at 18:03
  • @ZacharyKniebel display: table-cell is a CSS2 instruction usable on any element and perfect for aligning things vertically (and also having blocks of same height and staying on the same row). It's unrelated to the semantics of the table, td and th elements as it's CSS. It's probably more robust if a parent element has display: table though
    – FelipeAls
    Apr 14, 2013 at 18:03
  • @FelipeAls - I said only that it should be avoided, not that it could not be used. Apr 14, 2013 at 18:05
0

if you have fixed width and height of inside element, you may use this little trick

#outside {
    position: relative;
}
#inside {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 500px;
    width: 500px;
    margin-top: -250px;
    margin-left: -250px;
}
7
  • Where did you get -250px from? Apr 14, 2013 at 17:57
  • Element that's inside has dimensions of 300x250, how would I use it with dimensions which are not square?
    – Ilja
    Apr 14, 2013 at 17:59
  • Just take a look at my solution - it should work, regardless of the dimensions Apr 14, 2013 at 18:03
  • It works for width, but when I resize window margins on top and bottom still remain the same and don't change dynamically together with ones on right and left.
    – Ilja
    Apr 14, 2013 at 18:12
  • I don't think it's achievable, what I need it to get value of either margin left or right and apply such value to as top and bottom margin.
    – Ilja
    Apr 14, 2013 at 18:17
0

This gives a container div floating with a constant margin.

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

In addition with reference to content, you can place this inside the container. Upon exceeding the height, a scroll function in CSS can be applied. If not the scroll function of the window will take over.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.