4

I want to center an image in my project's GitHub README.org file, but everything I've tried so far hasn't worked:

#+ATTR_HTML style="center"
[[/path/to/img.png]]


#+ATTR_HTML align="center"
[[/path/to/img.png]]

#+begin_center
[[/path/to/img.png]]
#+end_center

Is this possible, or should I just go the low-friction route and use Markdown?

4

To center with CSS, you need to use margin-left: auto; and margin-right: auto;

try this

#+ATTR_HTML: :style margin-left: auto; margin-right: auto;
[[/path/to/img.png]]
| improve this answer | |
  • 1
    When I did this I end up with the text #+ATTR_HTML ... visible in the rendered README. – Alex Shroyer Sep 11 '16 at 15:17
  • 1
    @hoosierEE i modified the answer so the solution should be correct. I tried it and it works. – Xah Lee Sep 12 '16 at 21:57
  • 1
    I guess either GitHub's version of org-ruby, or their own CSS, removes these styles before rendering on github.com. Thanks for trying though, and by the way I really like your ErgoEmacs site! – Alex Shroyer Sep 13 '16 at 19:40
  • 1
    @hoosierEE thanks, and glad you found the answer. I forgot about the github layer. – Xah Lee Sep 14 '16 at 19:52
4

You can embed "raw" html as follows:

<p align="center"><img src="images/wim-128.png" /></p>

When displayed on GitHub.com, for some reason org-mode's image styling directives are ignored.

However GitHub does not ignore styling of <p> tags, so I used the above fix.

| improve this answer | |
  • 2
    note: it worked with #+html:. thanks. – Ehvince Aug 27 '19 at 11:01
  • 1
    Just to give a complete example, to center an image in a README.org on GitHub, one would write #+html: <p align="center"><img src="images/wim-128.png" /></p>. – Felix Hoffmann May 5 at 8:14

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.