Fri, 2016-02-26 00:22
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!