title: How can I align a background image to the left of centered text in an h1?
body: <p>I need to align an image just to the left of some text in an h1. So imagine it's something like:</p>
  
  <p>[logo image] Company</p>
  
  <p>So it isn't really a "background"--it's more of a foreground image.</p>
  
  <p>This works if the h1 is left-aligned, using padding to offset the text from the image:</p>
  
  <pre><code>h1 {
    background: url("logo.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    line-height: 70px;
    padding-left: 80px;
  }
  </code></pre>
  
  <p>However, I also want to center the text. I can do that as follows, but the image is still left-aligned:</p>
  
  <pre><code>h1 {
    background: url("logo.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    line-height: 70px;
    padding-left: 80px;
    text-align: center;
  }
  </code></pre>
  
  <p>In other words, the text is in the center of the screen, but the image is still on the left margin.</p>
  
  <p>How can I keep the image centered, but just to the left of the text? I don't want to get too tricky with absolute pixel values, or a fixed-width h1, as this all needs to be relative and responsive.</p>
  
  <p>I can't center the background image, as it needs an offset for the h1 text, which needs to scale.</p>
  
  <p>Should I just slap an img tag in there and be done with this?</p>
  
  <p>Another option would be to make the whole thing an image, but I want the text to scale--it's actually more of a caption than a logo.</p>
  
  <p>[Note: I googled a bunch but most of the links deal with the "centered h1 over a large background image" scenario, which this isn't. Thanks!]</p>