htmlcssmarkdowncenter

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.


Solution

  • 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%;
    }