CODEWITHSUNDEEP
htmlcssmarkdowncenter
Chetan
Chetan

Reputation: 48011

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.

Upvotes: 53

Views: 133032

Answers (9)

Daniel Danielecki
Daniel Danielecki

Reputation: 10512

You can use table for this.

my image
Centered title

code

| ![my image](https://picsum.photos/1024/400) | 
|:--:| 
| *Centered title* |

Upvotes: 0

pvillela
pvillela

Reputation: 593

Here is a simple solution that does not use any deprecated tags or attributes:

Hello there!

<img style="display: block; margin: auto;"
src="https://stackoverflow.design/assets/img/logos/so/logo-print.svg">

<p style="text-align: center;">
This is an image
</p>

Hi!

Upvotes: 2

Aliaksandr Sushkevich
Aliaksandr Sushkevich

Reputation: 12364

I'm surprised no one mentioned this way:

Hello there!

<p align="center">

  <img src="">
  This is an image

</p>

Hi!

Upvotes: 11

tremor
tremor

Reputation: 3186

I think I have a simple solution that will work given that you can define CSS. It also does not require any extensions or HTML! First your markdown image code:

![my image](/img/myImage.jpg#center)

Note the added url hash #center.

Now add this rule in CSS:

img[src*='#center'] { 
    display: block;
    margin: auto;
}

You should be able to use a url hash like this, almost like defining a class name.

To see this in action, check out my JSFiddle using SnarkDown to parse MarkDown in a textarea - https://jsfiddle.net/tremor/6s30e8vr/

Upvotes: 47

raisercostin
raisercostin

Reputation: 9189

With kramdown (used by githubpages)

{: style="text-align:center"}
That is, while there is value in the items on
the right, we value the items on the left more.

Or using the response from @(Steven Penny)

{:.mycenter}
That is, while there is value in the items on
the right, we value the items on the left more.

<style>
.mycenter {
    text-align:center;
}
</style>

Upvotes: 7

vdclouis
vdclouis

Reputation: 1196

In Mou (and perhaps Jekyll) this is quite simple.

-> This is centered Text <-

So taking that in mind you can apply this to the img syntax.

->![alt text](/link/to/img)<-

This syntax doesn't work for Markdown implementations that implement only what is documented on Daring Fireball.

Upvotes: 18

Zombo
Zombo

Reputation: 1

If you are using kramdown, you can do this

Hello there!

{:.center}
![cardinal](/img/2012/cardinal.jpg)  
This is an image

Hi!

.center {
  text-align: center;
}

Upvotes: 22

Chetan
Chetan

Reputation: 48011

I figured that I'd just have to use HTML where I want to horizontally align anything.

So my code would look like this:

Hello there!

      <center><img src="" ...></center>
      <center>This is an image</center>

Hi!

Upvotes: 60

MatTheCat
MatTheCat

Reputation: 18721

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

Upvotes: 11

Related Questions