Public news / April 2006 / Centering Elements
Centering Elements
If you've ever become frustrated while trying to use vertical-align to place one element in the center of another element, we now have a solution!
09 apr at 22:54 by Nick Gagne
There are 10 guest comments so far.
Search the archive
Stylegala news archive
- July 2008 [4]
- June 2008 [46]
- May 2008 [5]
- April 2008 [5]
- March 2008 [3]
- February 2008 [4]
- January 2008 [7]
- December 2007 [3]
- November 2007 [8]
- October 2007 [17]
- September 2007 [12]
- August 2007 [12]
- July 2007 [12]
- June 2007 [11]
- May 2007 [25]
- April 2007 [17]
- March 2007 [19]
- February 2007 [19]
- January 2007 [23]
- December 2006 [15]
- November 2006 [23]
- October 2006 [39]
- September 2006 [29]
- August 2006 [50]
- July 2006 [38]
- June 2006 [29]
- May 2006 [27]
- April 2006 [50]
- March 2006 [38]
- February 2006 [38]
- January 2006 [65]
- December 2005 [45]
- November 2005 [41]
- October 2005 [44]
- September 2005 [46]
- August 2005 [42]
- July 2005 [32]
- June 2005 [36]
- May 2005 [55]
- April 2005 [50]
- March 2005 [37]
- February 2005 [65]
- January 2005 [94]
- December 2004 [61]
- November 2004 [67]
- October 2004 [12]
- September 2004 [1]
Public news archive
- July 2008 [14]
- June 2008 [115]
- May 2008 [126]
- April 2008 [77]
- March 2008 [69]
- February 2008 [80]
- January 2008 [72]
- December 2007 [35]
- November 2007 [54]
- October 2007 [66]
- September 2007 [51]
- August 2007 [65]
- July 2007 [58]
- June 2007 [68]
- May 2007 [87]
- April 2007 [75]
- March 2007 [65]
- February 2007 [62]
- January 2007 [68]
- December 2006 [52]
- November 2006 [51]
- October 2006 [73]
- September 2006 [52]
- August 2006 [85]
- July 2006 [57]
- June 2006 [67]
- May 2006 [103]
- April 2006 [77]
- March 2006 [93]
- February 2006 [99]
- January 2006 [111]
- December 2005 [104]
- November 2005 [83]
- October 2005 [125]
- September 2005 [106]
- August 2005 [94]
- July 2005 [103]
- June 2005 [79]
- May 2005 [79]
- April 2005 [65]
- March 2005 [47]
- February 2005 [35]
- January 2005 [22]
- December 2004 [31]
- November 2004 [37]
News contributors
Features
- Stylegala BookStore
- The Stylegala BookStore has a massive archive of great books for you as a professional..
- Bullet madness
- Bullet madness is a list of 200 bullets, arrows and icons uploaded by our users.
- CSS Reference
- An alphabetical list over the most common CSS1 and CSS2 syntax and properties.
Sponsors
Decent article, but not at all news.
A rebuttal.
You should check it again. This method works in Internet Explorer too.
Posted about 2-3 years ago
http://www.wpdfd.com/editorial/thebox/deadcentre4.html
That method only positions it center to the window, if you have to scroll, then its no longer center. Try resizing your window down vertically until scroll bars appear.
It's interesting as a proof-of-concept, but practically speaking, I'd just use margins. It makes more logical sense and is less obtuse, which is good for maintaining CSS files.
Andy did you start that site just to debate this article? wow and somebody sent ME and angry hate mail saying i needed to get a life ;)
This method is meant for dynamic elements or multiple static elements of varying sizes. Suppose you have 10 images of varying size and you want each of them to be centered inside of a box, with all of the boxes having the same height and width, would you really want to set margins for each one of those?
David, no I didn't start the site just to debate the article. In fact I never planned on using that domain to discuss CSS, but I did think it made for a good first post while bored on a Sunday afternoon.
Nick, I agree that your method is good for what you mentioned. As I said in my article, having to know the size of the image being positioned is definitely a drawback. There's always more than one way to skin a cat.
I should have pointed out that this method is for images of varying dimensions, where you can't use margins or padding.
Add a comment:
Keep the comment relevant, constructive and be polite.
A valid email address or URL to your site must be provided, or the comment might get deleted. Content seemed inappropriate or offensive may be edited and/or deleted. Avoid explicit language and words such as "sucks" and "ripoff". For more in-depth discussions use our forum. Email addresses are never displayed. Line breaks and paragraphs are automatically converted - no need to use <p> or <br/>. Quotes & apostrophes are automatically converted to smart punctuation. Be careful when copying and pasting portions of entries or other comments. The following inline HTML elements may be used: <strong><em><pre><q><blockquote><code>. All other code will get removed before posting. Don't forget to close your tags.