Q:

How to get the width of the text inside an H1 tag?

Yes, this is most probably a duplicate, but please read my problem first before marking it down as such.
After two hours of searching, I'm getting really frustrated on this.
I've tried the following:
• Used jQuery's $("#this").width() method. It returns a value close to my screen's width.
• Used JavaScript's this.offsetWidth method. The same happens.
• Set display: inline as the style for the h1 and tried the first two methods. Didn't work. The same values are returned.
• Set display: inline-block and tried. No luck.
• Set padding and margins to 0. Unwanted result again.
• Tried getting the value with innerWidth. Still the same.
• Switched h1 with p and requested the value. No change. (And applied styles too)
Currently, I'm thinking of replacing all headings with disabled buttons but same styles, yet, this will be very inconvenient and will interfere a bit with the animations on the page.
What I'm trying to achieve is centre alignment for the heading. I know I can set position: relative, but then there will be trouble while vertically positioning the heading.
A little HTML:

    <h1 class="preload" id="interactor"> Hi!</h1>
    <h1 id="screenWidth"></h1>

In CSS:

h1.preload  {
    position: absolute;
    top: -20%; /* later gets animated */
    display: inline;
}

JavaScript:

    //just testing
    var sW = window.innerWidth;
    document.getElementById("screenWidth").innerHTML = sW;
    document.getElementById("interactor").innerHTML = $("#interactor").width();

EDIT:
I tried the inline method again. Did not work.
But, I discovered this:
When I used jQuery's css method to set display: inline, the value was properly returned (45 in my case), but doing so in the CSS file doesn't work. The element does get selected though, as font and color modifications are visible.

A:

here: it works fine if you have display: inline-block

$(function(){
  $h1 = $("h1");
  $("#result").text("width:"+$h1.width()+"px - inner width"+$h1.innerWidth()+"px");
});
h1{
  display:inline-block;
  padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Foo Bar</h1>
<p id="result"></p>

