如何将文字与上面的图像精确对齐

Question

I'm trying to align some text (asterisk) in the middle of the image above.

I've set the css to align center, but it looks like it's off to the left a bit.

How do I align the text in the exact center of the square image above?

    <div class="alignright">
    <p>
        <img alt="Sign up Today" height="259" src="http://i.ytimg.com/vi/rb8Y38eilRM/maxresdefault.jpg" width="300" /></p>
<p class="asterisk">
    *Price for a single city. Multi-city, state<br>
    and multi-state packages also available.</p> 
</div>
    <div class="circle">
        <span class="number">1</span>
            </div>
                <h3>
                    Banana</h3>
                <p>
                    A banana is an edible fruit, botanically a berry, produced by several kinds
                    of large herbaceous flowering plants in the genus Musa.</p>
                <p>&nbsp;</p>                
    <div class="circle">
        <span class="number">2</span>
    </div>
        <h3>
            Orange is the colour of saffron, pumpkins and apricots.</h3>
        <p>
            Mobile phones, mobile broadband and home broadband in the Orange Shop. Plus the latest
            news, entertainment, sport and lifestyle content from Orange.</p>
        <p>&nbsp;</p> 
      <div class="circle">
          <span class="number">3</span>
      </div>
          <h3>
              Watermelon</h3>
           <p>
               We here at the National Watermelon Promotion Board have one goal: to increase 
               consumer demand for fresh watermelon through promotion, research</p>

jsfiddle: http://jsfiddle.net/7bzc74qy/37/

Answer 1

It is being aligned to the center; you just have a left margin on your image that isn't on your asterisk.

Add those 49px to the asterisk and you're good to go.

.asterisk {
    margin: 20px 0 0 49px;
}

JSFiddle