Reply to thread

Message

<blockquote data-quote="Markshall" data-source="post: 249057" data-attributes="member: 1872">A lot of people have this problem and I've just recently saw a thread about this, but dead-centering elements in HTML seems to be a struggle when it shouldn't be so I decided to write a little work-around for it.There are probably many of these sorts of scripts and I've also saw work-arounds where people will wrap the element in 2 divs that will position it from the top and the 2nd div will position it from the left.This script simply takes every element with the class of 'deadcentre' then it will take it's parent element, get the height and width of it, subtract the outer-height and outer-width from the parent elements and then divide by 2 to get it slap bang in the centre.Script below:[HTML]&lt;!DOCTYPE html&gt;&lt;html&gt;&nbsp; &nbsp; &lt;head&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;title&gt;jQuery Dead Centre&lt;/title&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;style type=&quot;text/css&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; #div1 {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 500px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 700px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: #dedede;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #div2 {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 300px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 450px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: #de17fd;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &lt;/style&gt;&nbsp; &nbsp; &lt;/head&gt;&nbsp;&nbsp; &nbsp; &nbsp; &lt;body&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;div1&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;div2&quot; class=&quot;deadcentre&quot;&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;script type=&quot;text/javascript&quot; src=&quot;http://code.jquery.com/jquery-latest.js&quot;&gt;&lt;/script&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;script type=&quot;text/javascript&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; $(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.deadcentre').each(function(i, a) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $parent = $(a).parent();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(a).css({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: &quot;relative&quot;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top&nbsp; &nbsp; : ($parent.height() - $(a).outerHeight())/2,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left&nbsp; &nbsp; : ($parent.width() - $(a).outerWidth())/2&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &lt;/script&gt;&nbsp; &nbsp; &lt;/body&gt;&lt;/html&gt;[/HTML]Before deadcentre:<img src="http://i.imgur.com/HLn2iLE.png" alt="" class="fr-fic fr-dii fr-draggable " style="" />After deadcentre:<img src="http://i.imgur.com/b9RmUY8.png" alt="" class="fr-fic fr-dii fr-draggable " style="" />Hope it helps, fuckers.- Mark</blockquote>

[QUOTE="Markshall, post: 249057, member: 1872"] A lot of people have this problem and I've just recently saw a thread about this, but dead-centering elements in HTML seems to be a struggle when it shouldn't be so I decided to write a little work-around for it. There are probably many of these sorts of scripts and I've also saw work-arounds where people will wrap the element in 2 divs that will position it from the top and the 2nd div will position it from the left. This script simply takes every element with the class of 'deadcentre' then it will take it's parent element, get the height and width of it, subtract the outer-height and outer-width from the parent elements and then divide by 2 to get it slap bang in the centre. Script below: [HTML]<!DOCTYPE html> <html> <head> <title>jQuery Dead Centre</title> <style type="text/css"> #div1 { height: 500px; width: 700px; background: #dedede; } #div2 { height: 300px; width: 450px; background: #de17fd; } </style> </head> <body> <div id="div1"> <div id="div2" class="deadcentre"></div> </div> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(function(){ $('.deadcentre').each(function(i, a) { $parent = $(a).parent(); $(a).css({ position: "relative", top : ($parent.height() - $(a).outerHeight())/2, left : ($parent.width() - $(a).outerWidth())/2 }); }); }); </script> </body> </html>[/HTML] Before deadcentre: [img]http://i.imgur.com/HLn2iLE.png[/img] After deadcentre: [img]http://i.imgur.com/b9RmUY8.png[/img] Hope it helps, fuckers. - Mark [/QUOTE]

Verification

Reply to thread

Connect with us

Newest members