Multi
Multi
[CSS Snippet] Absolute Center
Topic Started: Monday, 18. June 2012, 10:16 (928 Views)
Aidan
Member Avatar
Level 12
Have you ever tried centering an image with CSS positioning?
Code:
 
position:absolute;
top:50%;
left:50%;
Those three lines have always seemed to fail, haven't they? Well no more! With this limited time offer, I'll even code your entire theme for you. :r

A slight adjustment to the above code should do the trick. Take these[1] as an example. On both pages you have an image show up that is absolutely centered in the page. To do so, take the width and height of your image (in this case we will be using the Alphacide Index image for our example):
Posted Image
Your CSS should look as such:
Code:
 
background:url(http://z4.ifrm.com/30296/128/0/p1110514/PMToast.png) no-repeat center center;
width:319px; /* Replace this value with the width of your image */
height:188px; /* Replace this value with the height of your image */
position:absolute;
top:50%;
left:50%;


The only thing missing now is what this whole snippet is meant to teach: the centering. To do so, you will have to add the following:
Code:
 
margin-left:-160px; /* Replace this with the negative value of half the width of your image */
margin-top:-94px; /* Replace this with the negative value of half the height of your image */


Final Outcome:
Code:
 
background:url(http://z4.ifrm.com/30296/128/0/p1110514/PMToast.png) no-repeat center center; /* Replace the URL with the URL of your image */
width:319px; /* Replace this value with the width of your image */
height:188px; /* Replace this value with the height of your image */
position:absolute;
top:50%;
left:50%;
margin-left:-160px; /* Replace this with the negative value of half the width of your image */
margin-top:-94px; /* Replace this with the negative value of half the height of your image */
If you are trying to center something with border and/or padding, see here: http://outlineforum.com/single/?p=1726408&t=4834761
[1] Alphacide Index | Alphacide Admin CP
Off
Profile
Quote
Top
 
Meta Ing
Member Avatar
Level 2
One thing worth noting is that padding and border widths should be taken into account when setting the margins. At the risk of over-complicating an otherwise simple tutorial, here's the math:
E == element; P == padding; B == border; X == left / right; Y == top / bottom
 
margin-X = (E-width + B-left + B-right + P-left + P-right) / -2

margin-Y = (E-height + B-top + B-bottom + P-top + P-bottom) / -2
In other words, that means:
  • Top / bottom margins should equal negative half of the sum of the element height, top and bottom border widths, and top and bottom padding.

  • Left / right margins should equal negative half of the sum of the element width, left and right border widths, and left and right padding.


It's important to keep in mind that this technique will center the entire block, not just the content area. In cases where the opposite border widths and padding are equal (e.g., border-width:10px 5px and padding:8px 3px), this won't be a problem as centering the block will center the content. In other cases, however, centering the content area will require a different formula that I'm still trying to work out.

Here are some examples. Maybe somebody else can figure out the math?

Anyways, good job on the tutorial. Nicely written and easy to follow. :)
Edited by Meta Ing, Wednesday, 20. June 2012, 18:32.
Off
Profile
Quote
Top
 
Aidan
Member Avatar
Level 12
I understand what you mean. I appreciate the extra explaining: it has been noted in the first post. If I figure out a solution, I'll get back to this topic or PM you.
Off
Profile
Quote
Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Coding & Development · Next Topic »

Welcome Guest [Log In] [Register]
Outline Live
Loading..
Loading..