Using Markdown, how do I center an image and its caption?
HtmlCssMarkdownCenterHtml Problem Overview
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.
Html Solutions
Solution 1 - Html
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!
Solution 2 - Html
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:
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/
Solution 3 - Html
If you are using kramdown, you can do this
Hello there!
{:.center}
This is an image
Hi!
.center {
text-align: center;
}
Solution 4 - Html
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.
-><-
This syntax doesn't work for Markdown implementations that implement only what is documented on Daring Fireball.
Solution 5 - Html
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%;
}
Solution 6 - Html
I'm surprised no one mentioned this way:
Hello there!
<p align="center">
<img src="">
This is an image
</p>
Hi!
Solution 7 - Html
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>
Solution 8 - Html
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!