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.

Ilja
  • 44,142
  • 92
  • 275
  • 498
  • Have you experimented with using a percentage instead of a fixed value? – Nic Apr 14 '13 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 '13 at 17:58

3 Answers3

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
    });
});
Zachary Kniebel
  • 4,686
  • 3
  • 29
  • 53
  • Also taken into account with `table-cell` – FelipeAls Apr 14 '13 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). – Zachary Kniebel Apr 14 '13 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 '13 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 '13 at 18:03
  • @FelipeAls - I said only that it should be avoided, not that it could not be used. – Zachary Kniebel Apr 14 '13 at 18:05
  • @llyaKnaup - `vertical-align` works regardless of fixed width. Make sure that your containing element is larger than the element that you are vertically aligning within it. – Zachary Kniebel Apr 14 '13 at 18:06
  • It shouldn't be avoided. The CSS table layout algorithms are just that: layout algorithms. Tables (HTML elements table, tr and td) used for layout purposes are in 2013 utter crap and have always been unsemantic, I'm not recommending the latter – FelipeAls Apr 14 '13 at 18:09
  • @FelipeAls - It should be avoided unless used in a table, as there are many other more compatible properties out there that can be used to achieve that same effect. If you need a reference, I ran a quick search and found this SO post for you: http://stackoverflow.com/a/11823622/1506793 – Zachary Kniebel Apr 14 '13 at 18:10
  • @ZacharyKniebel 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 '13 at 18:16
  • @ZacharyKniebel table-cell and inline-block have the same compatibility and fallback. Yes it's more robust with a parent displayed as table (dealing with [anonymous table objects - CSS2.1 REC](http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes) and apart from that it's a tool that is as useful as the others in a web developer/designer toolbox... – FelipeAls Apr 14 '13 at 18:16
  • @FelipeAls - This is interesting, but more of a chat topic. I am open to your point and will do some research on it in a few moments. – Zachary Kniebel Apr 14 '13 at 18:18
  • @IlyaKnaup - what you are talking about is achievable with LESS and SASS CSS - note that these are more intermediate than for beginners. Aside from that, you could use JS to do this. I will add it to my solution. – Zachary Kniebel Apr 14 '13 at 18:22
  • @IlyaKnaup - I have added the jQuery solution for this to my solution. – Zachary Kniebel Apr 14 '13 at 18:27
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;
}
monkeyinsight
  • 4,719
  • 1
  • 20
  • 28
  • Where did you get `-250px` from? – Zachary Kniebel Apr 14 '13 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 '13 at 17:59
  • Just take a look at my solution - it should work, regardless of the dimensions – Zachary Kniebel Apr 14 '13 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 '13 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 '13 at 18:17
  • @IlyaKnaup it's working for not square elements, you need to do margin-top as half of height, and margin-left as half of width – monkeyinsight Apr 14 '13 at 18:25
  • @monkeyinsight I understand that, but the thing is that once margin is set this way it will remain same for top and bottom, as height is not changing while window is resized. It will work for width, but not height. – Ilja Apr 14 '13 at 18:27
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/

Daniel
  • 4,816
  • 3
  • 27
  • 31