如何将文本精确对齐上方的图像

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