Issue On Setting Element CSS Left By Using jQuery

Question

This code simply using a .css() in jQuery to center element is the page. This is setting the vertical centering but the horizontal (left) is not working (Please be ware that I already knew there is a text-align:center rule in CSS to to do this by element parent, but I really need to know why jquery is not doing now?!)

var elemntHeight = $("h1").height();
var elementWidth =  $("h1").width();

var windowHeight = $(window).height();
var windowWidth  = $(window).width();

$("h1").css({
    "position" : "absolute",
    "left" :  windowWidth /2 - elementWidth/2,
    "top":  windowHeight/2 - elemntHeight /2
});

can you please let me know how to fix this?

You have to add some measurement value like px or whatever. "left" : windowWidth /2 - elementWidth/2 +"px" — Vucko
– Vucko, Commented Jun 13, 2014 at 23:38
@Vucko, thanks for reply buto why the to setting is working fine? — Suffii
– Suffii, Commented Jun 13, 2014 at 23:40
Changing the positioning of an element may change its dimensions — Musa
– Musa, Commented Jun 13, 2014 at 23:42
h1 is a block element which means it will take all of the parents width, so in your example - the body width. Add h1{display:inline-block} and it will work - Fiddle — Vucko
– Vucko, Commented Jun 13, 2014 at 23:46
@Suffii - Vucko's answer is correct regarding the block element. By defining position:absolute in your CSS, the script evaluates WITHOUT the full width of its parent (because it's been removed from the DOM flow due to positioning) - otherwise, it uses 100% of the width. — Jack
– Jack, Commented Jun 14, 2014 at 0:01

Jonathan · Accepted Answer · 2014-06-14 00:00:46Z

1

On load your h1 is actually 100% wide so the Left directove is working -- it's just that's it's only indenting by 8px

Stick a h1{border: 1px solid red;} into the css of your fiddle and you'll see

answered Jun 14, 2014 at 0:00

Jonathan

5,0292 gold badges23 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vucko Over a year ago

The 8px is the margin from body. Add body{margin:0} and it will be removed and the h1 will have left:0px.

Collectives™ on Stack Overflow

Issue On Setting Element CSS Left By Using jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related