Search code examples
javascriptjquerypercentagepixel

Convert CSS positioning from percentage to pixels

I have a headline vertically centered, like so:

h1{
  position: absolute;
  height: 30px;
  top: 50%;
  margin-top: -15px;
}

Now I want to use jQuery to convert the current position to pixels. But if I try this:

$('h1').css('top', $('h1').offset().top.toString() + "px")

The headline moves up a little. What am I missing here?

Solution

  • jQuery offset top takes the negative margin into account. It's not only looking at the top value.

    Here is something you could do:

    var margin = parseInt($('h1').css("margin-top")) * -1, //positive val of margin
    offset = margin + $('h1').offset().top;

$('h1').css({
    top: offset + "px"
});