title: How can I vertically and horizontally align text over an image?
body: <p>I have a simple image of a ball which I am using as a background. I would like to overlay text. The text will be a number, i.e. a lottery number.</p>
  
  <p>I have tried various methods but cannot find a solution, e.g.</p>
  
  <p>CSS</p>
  
  <pre><code>#container {
    height:400px;
    width:400px;
    position:relative;
  }
  
  #image {    
    position:relative;
    left:0;
    top:0;
  }
  #text {
    position:absolute;    
    color:black;
    font-size:18px;
    font-weight:bold;
    text-align:center;
    top:0px;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;img id="image" src="http://www.powerball-lottery-blog.com/img/balls/ball_white_40.gif"/&gt;
      &lt;p id="text"&gt;37&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I just cannot get the number to align vertically and horizontally in the ball.</p>