Code for center image with right aligned caption
-
I use quite a bit of imagery on my blog, photos, illustrations, etc. For the most part, I prefer the image centered with a right aligned caption. The template I use is chaotic soul.
For the last few months, an earnest young guy has been helping me with html and css coding, which, admittedly, is not my area of expertise. He has sent table codes, div class caption codes (forgive me — I know there are more appropriate names like one and two cell). He has concluded that Firefox is the problem. That he can render exactly what I requested — a center image with a right aligned caption in every browswer BUT Firefox. In the meantime, I have been centering captions under the centered images, but would prefer to have the caption right aligned under the centered image. Can anyone solve this for me?
-
Visual Editor tested:
`<div style="padding: 0pt; width: 200px">
<img src="xyz.jpg" height="300" width="200" />
<div align="right">caption</div>
</div>`
Make sure that the width of the Image matches the div’s width. Otherwise the caption won’t align with the right side. -
And please leave out the backticks (
) I’m still struggling with the proper method of posting code on the forums. -
What you might want to do is design a table with three columns, put the image in the center, and the caption in the right. Leave the left blank.
-
deltafoxtrot:
You’re a genius. And thank you for pointing out the width variable as being important. What I did was simply change the width variable following the div style to match the image I had and it worked perfectly.
And Raincoaster,
If I could design a table I would, but I’m not that sophisticated in coding.At the risk of alienating either of you, let me ask this. Maybe you can solve this for me: Here’s a test I just did with a table (that was done for me) that I used once before that worked.
<table class=”caption_right”>
<tr>
<td><img src=”http://eaesthete.wordpress.com/files/2008/03/jack.jpg” alt=”jack.jpg” /></td>
</tr>
<tr>
<td>ffffound </td>
</tr>
</table>
<p align=”left”> </p>The specifics of this can be found at http://eaesthete.wordpress.com/wp-admin/post.php?action=edit&post=2690 Or Test 3 Under drafts. As you can see, the caption is fine, but the image is not centered.
Yet in the original of this, which can be found at:
http://theerrantaesthete.com/2008/03/14/2462/the image appears more centered. I’m trying to understand what throws it off in one case and not another. I like using tables since the caption is smaller and tucked under the image, and since I use this format most frequently, I’m trying to find something that I can use repeatedly with good results.
-
I can’t see your edit screen (for a good reason, it’s your blog not mine). So I cannot comment on that.
And I’m not that much of a genius that I could hack my way into your blog. :)
-
Actually I believe raincoaster misunderstood your question (no offense intended) since his solution would result in the caption appearing right of the image not beneath.
Sincere apologies if I got you wrong, RC.
-
Deltafoxtrot,
Thank you for trying to solve this for me and you could very well be right on raincoaster’s solution. And no, I don’t think you’re getting me wrong. Let me ask you this: I feel sure you can see the original, without hacking into my blog and demonstrating to the group at large, how effortless it might be. Right? So the link below is readily available to you.
http://theerrantaesthete.com/2008/03/14/2462/
If you were to recreate exactly what you see there in code, how would it look? Centered image, right aligned text, tucked tight and small under the image within the confines of the width.
-
You’re catching me right before bedtime (It’s 2AM for me) so I won’t dive into the code to crack this riddle tonight. I’ll get back to this thread tomorrow.
Just one thing: I was apologizing to Raincoaster
OK, two things: The a building on the pic, the Jewish Museum Berlin, is really impressive. I’ve been there several times.
-
You’re right: that’s what I thought was being asked. I promise not to answer any more questions till I’ve had my coffee.
-
Deltafoxtrot,
Not only are you coming to my aid in trying to resolve this code issue for me, but it turns out you also identified something I could not – the location of the picture (which apparently is the Jewish Museum in Berlin) designed by Daniel Libeskind. Thank you! I’ve already noted it in my blog. Any further thoughts on cracking the “riddle” of my code dilemma?
-
OK, if you want to work with tables, you can use this code:
<table cellspacing="0" cellpadding="0" border="0"> <tr> <td align="center"><img src="mypicture.jpg" width="200px" height="100px" alt="mydescription" /></td> </tr> <tr> <td align="right">My caption</td> </tr> </table>Of course you have to insert the actual size of your picture
-
-
-
deltafoxtrot, I only suggested it because I understood that easthete wants to use tables for some reason. Of course I’d use divs, too – but it’s not my blog :-)
-
Isadora,
Thank you for picking up this thread. Trust me, I don’t know enough to know which is better. Tables or divs. The reason I preferred the table was due to the caption. It was smaller in size and tucked under the image very nicely. If I could achieve that with a div, all the better.
In fact, here was a code that worked for me a couple of months back using div. The caption was small and tucked. The image centered.
<div class=”caption”>
<div><img src=”http://farm1.static.flickr.com/31/102463794_6db9a83ef9.jpg?v=0″ height=”500″ width=”500″ />
Grand Central [
Flickr]</div>
</div>But when I tested it yesterday, it wiped out the sidebar. Here is the link:
http://theerrantaesthete.com/2008/02/24/sunday/If you could make this work, that would be great.
-
@eaesthete – Isadora has forgotten more about code than I’ve learned and I suspect the same is true of deltafoxtrot. However, sometimes I need to use tables in my blogs so I take the path of least resistance: I create them in Windows LiveWriter and copy/paste the code.
It’s effortless that way.
-
This one reduces the caption’s font size. You can adjust the size by changing the em value.
<div style="padding: 0pt; width: 200px"> <img src="xyz.jpg" height="300" width="200" style="margin: 0pt; padding: 0pt" alt="" /> <div style="margin: 0pt; padding: 0pt; font-size: 0.7em" align="right">caption</div> </div>@ellaella: *blush*
-
ellaella, you’re welcome to show us a code example and to correct my mistakes. I also don’t code tables by hand on my blog anymore: I use a bookmarklet which I wrote for this purpose.
-
- The topic ‘Code for center image with right aligned caption’ is closed to new replies.
WordPress.com Forums 