| [CSS Snippet] Absolute Center | |
|---|---|
| Tweet Topic Started: Monday, 18. June 2012, 10:16 (928 Views) | |
| Aidan | Monday, 18. June 2012, 10:16 Post #1 |
![]()
Level 12
|
Have you ever tried centering an image with CSS positioning? Those three lines have always seemed to fail, haven't they? Well no more! ![]() 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): ![]() Your CSS should look as such:
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:
Final Outcome: 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 | Wednesday, 20. June 2012, 18:30 Post #2 |
|
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: In
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 | Wednesday, 20. June 2012, 20:46 Post #3 |
![]()
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 » |
| Track Topic · E-mail Topic |
8:12 PM Jul 10
|
Powered by ZetaBoards Premium · Privacy Policy



Multi
Multi


8:12 PM Jul 10


Outline Live