Image Captions on Bear Blog
I've been trying to figure out a way to get image captions exactly the way I want ever since I started Bear Bloggin'. Since markdown doesn't natively support image captions, simply putting text underneath an image is the most obvious option. However, I do not like how the space between an image and text looks, especially if the text is sandwiched between two images above and below. I initially gave up and the result was that my travel posts turned into photo dumps with no context. Funnily enough, I was okay with that.
But the wish for image captions returned. Peige of Pretend Typewriter, who is on my Mt. Rushmore of best friends, showed me how they got their wonderful image captions, as well as pointing me to Avaruussuo's more minimalist ones.
While my image caption wishes aimed for something similar, I wanted the exact choice of image-to-text spacing, text size, as well as the full-sized image. Trying to get this by playing with the CSS resulted in things getting weird and wild.
But after a lot of web searching, tinkering, and opting for a mix of html and markdown, I came up with something I liked. Maybe this is a well-known how to do, but as a CSS/html/markdown/etc newbie, it was a breakthrough. The result is below:
If anyone is interested, here is what I used to do this.
*<center><div style="margin-top: -15px;"><span style="font-size: 95%;">"caption text"</div></center>*
I hope it helps anyone who also wants captions for their images and have been stuck like me. Happy New year, folks!