No replies
iONic
iONic's picture
Offline
newbie
Last seen: 5 years 22 weeks ago
Timezone: GMT-5
Joined: 2016-02-25
Posts: 1
Points: 2

I and really new to CSS, but have some understanding to html...

I am editing/creating an ebook(epub) in Sigil, a Google Project program. I added some code to post images with captions, both in bold and also in normal weight.

<figure><img src="../Images/img_193.jpg" alt=""/>
  <figcaption><span class="" style="font-size:small;font-weight:bold;font-style:italic;">Giacomo Balia. Dog on Leash 1912</span><br clear="all"/><span class="" style="font-size:small;font-style:italic;">Courtesy of The Museum of Modern Art</span>
</figcaption>
</figure>
 
<figure><img src="../Images/img_194.jpg" alt=""/>
  <figcaption><span class="" style="font-size:small;font-weight:bold;font-style:italic;">Giacomo Balia. Automobile and Noise</span><br clear="all"/><span class="" style="font-size:small;font-style:italic;">Courtesy of Art of This Century</span>
</figcaption>
</figure>

This results in a left aligned image with a line of bold text followed by another line of normal text below it. Visually it is exactly what I want.

However, I want this layout centered on the page with the text still aligned to the bottom left corner of the image. And since I have a ____load of images, I wanted to create a styles.css file containing all this markup.

The problem I am having is that when I center the "figure" tag using "text-align: center," the text is also centered.

Any help would be greatly appreciated!