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> </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> </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/
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.