Chetan Chetan - 3 months ago 19
CSS Question

Using Markdown, how do I center an image and its caption?

I want to end up with:

Hello there!

<image>
This is an image

Hi!


Where the image and the text
This is an image
are centered on the page. How do I accomplish this with Markdown?

Edit: Note that I'm looking to horizontally center the image and text on the page.

Answer

You need a block container with a defined height, same value for line-height and image with vertical-align:middle; It should work.

Hello there !

<div id="container">
    <img />
    This is an image
</div>

Hi !

#container {
    height:100px;
    line-height:100px;
}

#container img {
    vertical-align:middle;
    max-height:100%;
}
Comments