css - jQuery mobile image centered in header with "default" size -

See this Bela:

I'm trying to leave the logo image immediately " Text of "

I also want the image to be in the same shape as the original title text which I think is ~ 16px more accurate, I do not want to resize the header bar due to the large image , I want to shrink the image.

I'm able to resize the height tag, but the center alignment can not be found.

  & lt; Div data-role = "page" & gt; & Lt; Div data-role = "header" data-status = "inline" & gt; & Lt; Img src = "example.png" & gt; & Lt; H1 & gt; Trial & lt; / H1> & Lt; / Div & gt; & Lt; / Div & gt;    
 
 
 The best part is that your image is that  & lt; H1 & gt;  and its size can be set to  1em , whatever the size of the text automatically grants the scale.  
  & lt; Div data-role = "page" & gt; & Lt; Div data-role = "header" data-status = "inline" & gt; & Lt; H1 & gt; & Lt; Img src = "example.png" style = "height: 1em" /> Trial & lt; / H1> & Lt; / Div & gt; & Lt; / Div & gt;