If you’re a web developer, web designer, and you have to deal with CSS, and CSS not working properly on IE (cause of it’s stupid box model conception and endless ilogic behaviour bugs) then I’m sure you have always wanted to be able to do something like “float:center”<\/p>\n
I don’t really get why the people that made the CSS standards, didn’t include stupid float:center… there’s float:left, float:right… it’s only obvious. And worst of all, you know centering is one very important thing…<\/p>\n
so we have to go around doing stuff like<\/p>\n
margin:0 auto;<\/p>\n
but that won’t really work on all occasions, you have to think of the size of the parent elements too, so that the auto margins will work correctly.<\/p>\n
The other day a friend that’s a graphic designer even came up with his own trick of using percentages to add correct margins to center divs.<\/p>\n
But look no more (at least until they decide to give us float:center), if you use Prototype, maybe you also use Scriptaculous…<\/p>\n
Just add this to your effects.js file:<\/p>\n
var my_width = 0; if ( typeof( window.innerWidth ) == 'number' ) my_width = window.innerWidth; my_width = document.documentElement.clientWidth; my_width = document.body.clientWidth; element.style.position = 'absolute'; var scrollY = 0;<\/p>\n if ( document.documentElement && document.documentElement.scrollTop ) var elementDimensions = Element.getDimensions(element);<\/p>\n var setX = ( my_width - elementDimensions.width ) \/ 2; setX = ( setX <\/p>\n This will center your div if you do something like this on Javascript to the div in question:<\/p>\n Try it, it works. Also, if you want to keep centering the div even on window resize or scroll, you'll have to add And remember, Linux Rules.<\/p>\n","protected":false},"excerpt":{"rendered":" You wish… So many work arounds to center divs, that I was almost getting to the point where I was about to start selling black t-shirts with the words float:center If you’re a web developer, web designer, and you have to deal with CSS, and CSS not working properly on IE (cause of it’s stupid […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[15,30,33,68],"tags":[],"class_list":["post-341","post","type-post","status-publish","format-standard","hentry","category-code","category-geeklife","category-gubatron","category-random-stuff"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p5Unzf-5v","jetpack-related-posts":[{"id":987,"url":"https:\/\/www.gubatron.com\/blog\/geek-t-shirt-collection-3-css-protest-wedoit4youcom\/","url_meta":{"origin":341,"position":0},"title":"Geek T-Shirt Collection #3 – CSS Protest \/ wedoit4you.com","author":"gubatron","date":"November 22, 2008","format":false,"excerpt":"wedoit4you.com was one of my personal efforts from school, with it I learned a lot about web development, technology, news, and the tech industry since it was a blog before the term was even invented. During those times, I was learning CSS, and I had to learn about centering elements,\u2026","rel":"","context":"In "Geeklife"","block_context":{"text":"Geeklife","link":"https:\/\/www.gubatron.com\/blog\/category\/geeklife\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3616,"url":"https:\/\/www.gubatron.com\/blog\/codejava-argb_8888-pixel-abstraction\/","url_meta":{"origin":341,"position":1},"title":"[CODE\/JAVA] ARGB_8888 Pixel Abstraction","author":"gubatron","date":"December 4, 2016","format":false,"excerpt":"This is one of the ways you can decode Pixel colors out of the integers you get from Android Pixels. ARGB_8888, stands for Alpha, Reg, Green, Blue. The 8's stand for the number of bits per channel. In Android, signed int's are used to represent pixel's alpha\/color information. Since Android's\u2026","rel":"","context":"In "Code"","block_context":{"text":"Code","link":"https:\/\/www.gubatron.com\/blog\/category\/code\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":913,"url":"https:\/\/www.gubatron.com\/blog\/how-to-filter-logs-in-lighttpd\/","url_meta":{"origin":341,"position":2},"title":"How to filter logs in lighttpd","author":"gubatron","date":"October 27, 2008","format":false,"excerpt":"I usually don't keep lighttpd access logs turned on to avoid writing for every read, but there are times when you need to monitor what's going on, and you'd like to have a high signal-to-noise ratio so it might be convenient to ignore all requests to .gif, .png, .jpg, .css,\u2026","rel":"","context":"In "Code"","block_context":{"text":"Code","link":"https:\/\/www.gubatron.com\/blog\/category\/code\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.lighttpd.net\/light_logo.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":310,"url":"https:\/\/www.gubatron.com\/blog\/david-blaine-under-water-at-the-lincoln-center-in-new-york\/","url_meta":{"origin":341,"position":3},"title":"David Blaine Under Water at the Lincoln Center in New York","author":"gubatron","date":"May 4, 2006","format":false,"excerpt":"There's also a Picture Gallery Click on Read more to see credits Shot on a Cannon PowerShot SD110 (so bear with me until I get a dv camera) Edited with iMovie (so bear with me until I get the hang of Final Cut Pro, the subtitles could've been better, but\u2026","rel":"","context":"In "Diary"","block_context":{"text":"Diary","link":"https:\/\/www.gubatron.com\/blog\/category\/diary\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1051,"url":"https:\/\/www.gubatron.com\/blog\/jquery-tag-wrapping\/","url_meta":{"origin":341,"position":4},"title":"jQuery tag wrapping","author":"gubatron","date":"December 19, 2008","format":false,"excerpt":"Many times you'll be working on something in HTML that could be long and repetitive, and then for some reason you need to edit the entire thing to wrap each of the tags on some other tags, a common example would be to link many elements. Take this example, there's\u2026","rel":"","context":"In "Code"","block_context":{"text":"Code","link":"https:\/\/www.gubatron.com\/blog\/category\/code\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":308,"url":"https:\/\/www.gubatron.com\/blog\/useful-firefox-extensions\/","url_meta":{"origin":341,"position":5},"title":"Useful Firefox extensions","author":"gubatron","date":"May 2, 2006","format":false,"excerpt":"Here's a page I've been meaning to do a long time ago, if you're a web developer you might want to bookmark it so that next time you set up Firefox +1.5 you'll have direct links to all the web developer tools you'll ever need. Web Developer Extension (Best extension\u2026","rel":"","context":"In "Gubatron"","block_context":{"text":"Gubatron","link":"https:\/\/www.gubatron.com\/blog\/category\/gubatron\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/posts\/341","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/comments?post=341"}],"version-history":[{"count":0,"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/posts\/341\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/media?parent=341"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/categories?post=341"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/tags?post=341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\nEffect.Center = function(element)
\n{
\n try
\n {
\n element = $(element);
\n }
\n catch(e)
\n {
\n return;
\n }<\/p>\n
\n var my_height = 0;<\/p>\n
\n {<\/p>\n
\n my_height = window.innerHeight;
\n }
\n else if ( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) )
\n {<\/p>\n
\n my_height = document.documentElement.clientHeight;
\n }
\n else if ( document.body && ( document.body.clientWidth || document.body.clientHeight ) )
\n {<\/p>\n
\n my_height = document.body.clientHeight;
\n }<\/p>\n
\n element.style.display = 'block';
\n element.style.zIndex = 99;<\/p>\n
\n {
\n scrollY = document.documentElement.scrollTop;
\n }
\n else if ( document.body && document.body.scrollTop )
\n {
\n scrollY = document.body.scrollTop;
\n }
\n else if ( window.pageYOffset )
\n {
\n scrollY = window.pageYOffset;
\n }
\n else if ( window.scrollY )
\n {
\n scrollY = window.scrollY;
\n }<\/p>\n
\n var setY = ( my_height - elementDimensions.height ) \/ 2 + scrollY;<\/p>\n
\nEffect.Center('idOfMyDiv')
\n<\/code><\/p>\n
\nYou might want to hack the function in case you don't want this effect to center vertically.<\/p>\n
\ncallbacks to window.onresize and window.onscroll<\/p>\n![](\"https:\/\/i0.wp.com\/static.flickr.com\/63\/186374336_4f817d0770.jpg?w=640\")
<\/p>\n