如何將文字與上面的圖像精確對齊

Question

我正在嘗試在上方圖像的中間對齊一些文本（星號）。

我已經將css設置為居中對齊，但是看起來有點向左偏移。

如何在上面的正方形圖像的確切中心對齊文本？

    <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

它與中心對齊； 您只在圖像上的左邊緣沒有星號。

將那些49px添加到星號，就可以了。

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

JSFiddle