30

Say you have a blog site with Jekyll and the blog posts are centered on the page. I want content (i.e. paragraphs, words, code, etc.) to be aligned to the left, but images to be centered.

I have the text, etc. left-aligned, but now I'm struggling to get the image (who has a CSS style of max-height: 80%) to be centered as well.

It appears that Jekyll's blog generator (from Markdown) wraps images in <p></p> tags so margin: 0 auto doesn't center the image. I've attached code snippets below:

<li>
    <h2 class="post-title">Hello World</h2>
    <div class="post-date"><span>May 21, 2014</span></div>
    <div class="post-content">
        <p><img src="/images/photos/blog/hello-world.jpg" alt="blog-image"></p>
    </div>
</li>

ul#posts {
  list-style-type: none;
  margin: 0 auto;
  width: 60%;
}

ul#posts > li {
  margin-bottom: 35px;
  text-align: center;
}

ul#posts > li div.post-content {
  text-align: left;
}

ul#posts > li > div.post-date {
  color: #A0A0A0;
  font-style: italic;
  margin-bottom: 15px;
}

ul#posts > li > div.post-content > p > img {
  margin: 0 auto;
  max-height: 80%;
  max-width: 100%;
}

How can I center the image in the blog post?

1
  • There will be text in other <p> tags as well, and I don't want that text to be centered.
    – Andrew Tat
    May 23, 2014 at 0:56

8 Answers 8

39

Here is a way to do it via kramdown:

{:refdef: style="text-align: center;"}
![My Image]({{ site.baseimg }}/images/example1.png)
{: refdef}

This will create another paragraph around the paragraph added by kramdown. Source

9

Kramdown

Jekyll uses kramdown as a default markdown renderer.

kramdown allows you to add additional attributes to the original markdown-flavored image link like below. (See here and here for the official syntaxes)

If you are interested, you can check out the working example from my blog post

Apply attributes directly to the img

![placeholder](https://via.placeholder.com/100x150){:style="display:block; margin-left:auto; margin-right:auto"}

Above will print image centered. enter image description here

Add user-defined css class for easier use

img.centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

I personally adds above code to my blog's css file and simply uses like

![placeholder](https://via.placeholder.com/100x150){:.centered}

It is essentially the same as the first codeblock, but much easier to use.

Apply attributes to the <p> tag

One other way is to apply attributes to the <p> tag that surrounds img. The advantage of this method is that you can center multiple images (as long as they are on the same paragraph).

{:style="text-align:center;"}
![placeholder](https://via.placeholder.com/100x150)
![placeholder](https://via.placeholder.com/100x150)

Add user-defined css class for easier use

.text-align-center {
  text-align: center;
}

Once again you may put above code into your css file and use it like below.

{:.text-align-center}
![placeholder](https://via.placeholder.com/100x150)
![placeholder](https://via.placeholder.com/100x150)

EDIT: It just crossed my mind if you wants ALL image to be centered by default, adding

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

to your css file may works for you. But note that I have not tested deeply enough to find out any unwanted side effects. So use it at your own risk.

0
5

I had to do the same in markdown on drupal and this solution worked for me though.

I aligned my images to the right by adding inline CSS like this:

<div style="text-align: right"><img src="/default/image/sms.png" width="100" /></div>

For aligning your image to the right or center, replace

<div style="text-align: right">

to

<div style="text-align: center">

1

This should work if you add display: block to your style so that margin-left: auto and margin-right:auto have the expected effect:

ul#posts > li > div.post-content > p > img {
  display: block;
  margin: 0 auto;
  max-height: 80%;
  max-width: 100%;
}
1

This simple code works for me.

<p align="center"">
   <img src="/default/image/sample.png" width="100%" />
</p>
0
{: style="display:block; margin-left: auto; margin-right: auto;"}
-1

Since you have your image wrapped in a set of p tags you can simply set those p tags to text-align: center; It would most likely be best to give those p tags a class so you don't mess up any other p tags on the page. Hope that helps!

Codepen: http://codepen.io/Travo100/pen/tJCBH

<p class="image-center"><img src="/images/photos/blog/hello-world.jpg" alt="blog-image"></p>

.image-center { text-align: center; }
4
  • 1
    Is there a way to set HTML tag classes in Markdown?
    – Andrew Tat
    May 23, 2014 at 0:57
  • I wish I could help you there, but I've never used Markdown. You can set classes for HTML elements using jQuery/Javascript. A how-to tutorial: mkyong.com/jquery/…
    – Travo100
    May 23, 2014 at 3:00
  • You can set classes for elements in Markdown, but it depends on which Markdown processor you're using. Here's a SO post about using classes with the Kramdown processor: stackoverflow.com/questions/975264/…
    – nicksuch
    May 23, 2014 at 18:34
  • And here's a gist showing something similar to your .md and .html files: gist.github.com/nicksuch/5c3d6b2da80bd7a3952e
    – nicksuch
    May 23, 2014 at 19:58
-1

There are many ways to achieve horizontal centering

1.

.container-to-be-centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: "fixed width here"
}

2.

.parent-container {
  text-align: center;
}
.child-container-to-be-centered {
  display:inline-block;
}

3.

.container-to-be-centered {
  position: absolute;
  left: 50%;
  margin-left: "negative value of the container width"
}

etc.

So in this case to center your image

<p>
  <img>
</p>

p {
  text-align: center;
}
img {
  display: inline-block;
}
2
  • 1
    Is there a way where only paragraphs with <img> in them are centered? I don't want every paragraph tag's content to be centered.
    – Andrew Tat
    May 23, 2014 at 0:58
  • you can wrap a container around p tag <div class="text-center"><p><img></p></div> and use it to center the image instead relying on p to center it
    – Chihung Yu
    May 23, 2014 at 1:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.