1

Googled around and found a jQuery script for auto centering a div, horizontally and vertically.

Added exact the same as the example gives but by one reason the div is not centered by page load, only on window resize.

Example link code: http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html

Example demo: http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/3.html

The link I made is online (test): http://i333180.iris.fhict.nl/test/index.html

And as you can notice by source-center.js, it is just the same as the examples code is given but it only centers when window is resized.. Thanks

Bibek Sharma
  • 3,210
  • 6
  • 42
  • 64
Jim Vercoelen
  • 1,048
  • 2
  • 14
  • 40

3 Answers3

1

In your example, you are taking the width of a block-level element - by definition it takes up the full width of its parent. So, the item is already centered, but your text is left aligned inside it. You need to declare your div as an inline-block element, then the horizontal centering will work.

A good explanation can be found here: https://stackoverflow.com/a/9189873/844726

Here is the code - I only added the style attribute to your div (purely for example):

The HTML:

<div class="className" style="display: inline-block">
    <p>Centered In The Middle Of The Page With jQuery</p>
</div>

And the JS:

$(document).ready(function(){

 $(window).resize(function(){

  $('.className').css({
   position:'absolute',
   left: ($(window).width() 
     - $('.className').outerWidth())/2,
   top: ($(window).height() 
     - $('.className').outerHeight())/2
  });

 });

 // To initially run the function:
 $(window).resize();

});

http://jsfiddle.net/yukg0nv5/

Community
  • 1
  • 1
swatkins
  • 13,530
  • 4
  • 46
  • 78
0

Auto centering a div in a div is quit easy, Here is a code you cloud try!

.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Demo: https://css-tricks.com/centering-css-complete-guide/

  • Yes, I am aware of the method but founded the code above witch should work without setting de with or the height. I used the same code and with my page it won't work correctly and online it does. But I appreciate your suggestion tho! – Jim Vercoelen Jul 25 '15 at 02:55
0

As an alternative to the inline-block answer you can use position:absolute just add

.className{
position:absolute; 
}

to your css file.

https://jsfiddle.net/26y9aue4/2/

blarmor
  • 121
  • 1
  • 4