CODEWITHSUNDEEP
htmlcssmarkdown
Jedidja
Jedidja

Reputation: 16960

Markdown and image alignment

I am making a site that publishes articles in issues each month. It is straightforward, and I think using a Markdown editor (like the WMD one here in Stack Overflow) would be perfect.

However, they do need the ability to have images right-aligned in a given paragraph.

I can't see a way to do that with the current system - is it possible?

Upvotes: 276

Views: 360640

Answers (20)

Greg Hewgill
Greg Hewgill

Reputation: 993095

You can embed HTML in Markdown, so you can do something like this:

<img style="float: right;" src="whatever.jpg">

OR

<img style="display: block; margin: auto;" src="whatever.jpg"/>


Continue markdown text...

Example:

<img style="float: right" src="https://cdn.sstatic.net/Img/unified/sprites.svg" alt="Sublime's custom image" />

Upvotes: 289

Nikhil Dash
Nikhil Dash

Reputation: 11

![Alt Text](image URL){ align=right }

Check this ultimate guide for Markdown image styling for more here

Upvotes: 1

Bill Hoag
Bill Hoag

Reputation: 697

For a simple approach to just indenting your image a bit, just use some non-breaking spaces with an img element. E.g., &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://user-images.githubusercontent.com/123456/123456789-3aabedfe-deab-4242-97a0-a6641e675e68.png" />

Upvotes: 0

N. Joppi
N. Joppi

Reputation: 466

The best and most customizable option:

<div style="display:flex; align-items: center;">
     <div style="flex:1">
          <img src="https://www.researchgate.net/profile/Jinsong-Chong/publication/233165295/figure/fig5/AS:667635838640135@1536188196882/Initial-contour-Figure-9-Detection-result-in-low-resolution-image-in-low-resolution-image.ppm"/>
     </div>
     <div style="flex:1;padding-left:10px;">
          <img src="https://www.researchgate.net/profile/Miguel-Vega-4/publication/228966464/figure/fig1/AS:669376512544781@1536603205341/a-Observed-low-resolution-multispectral-image-b-Panchromatic-image-c.ppm" />
     </div>
</div>

This will align the first to the left, and the second to the right. Works for more than 2 images too.

Upvotes: 1

Chetan B B
Chetan B B

Reputation: 31

You can directly use align property:

   <img align="right" width="100" height="100" src="https://images.unsplash.com/photo-1650620109005-099c2de720f8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxM3x8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60">

Upvotes: 2

dopexxx
dopexxx

Reputation: 2636

I think the easiest solution is to directly specify align="right":

<img align="right" src=/logo.png" alt="logo" width="100"/>

Upvotes: -1

rahul-ahuja
rahul-ahuja

Reputation: 1424

Align image and text side-by-side as part of a paragraph in a single block, within a warning box.

<div class="warning" style='background-color:#EDF2F7; color:#1A2067; border-left: solid #718096 4px; border-radius: 4px;'>
<p style='padding:0.7em; margin-left:0.7em; display: inline-block;'>
<img src="typora_images/image-20211028083121348.png" style="zoom:70%;  float:right; padding:0.7em"/>
<b>isomorphism</b>  &rarr;  In mathematics, an isomorphism is a structure-preserving mapping between two structures of the same type that can be reversed by an inverse mapping.<br>
</p>
</div>

Output :

enter image description here

Upvotes: 0

Andersonfrfilho
Andersonfrfilho

Reputation: 139

this work for me 

<p align="center">
 <img src="/LogoOfficial.png" width="300" >
</p>

Upvotes: -2

OzzyCzech
OzzyCzech

Reputation: 10342

I found a nice solution in pure Markdown with a little CSS 3 hack :-)

![image alt >](/image-right.jpg)
![image alt <](/image-left.jpg)
![image alt ><](/center-image.jpg)

Follow the CSS 3 code float image on the left or right, when the image alt ends with < or >.

img[alt$=">"] {
  float: right;
}

img[alt$="<"] {
  float: left;
}

img[alt$="><"] {
  display: block;
  max-width: 100%;
  height: auto;
  margin: auto;
  float: none!important;
}

Upvotes: 112

Zuha Karim
Zuha Karim

Reputation: 279

I had the same task, and I aligned my images to the right by adding this:

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

For aligning your image to the left or center, replace

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

with

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

Upvotes: 3

tremor
tremor

Reputation: 3186

I have an alternative to the methods above that used the ALT tag and a CSS selector on the alt tag... Instead, add a URL hash like this:

First your Markdown image code:

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

Note the added URL hash #center.

Now add this rule in CSS using CSS 3 attribute selectors to select images with a certain path.

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

You should be able to use a URL hash like this almost like defining a class name and it isn't a misuse of the ALT tag like some people had commented about for that solution. It also won't require any additional extensions. Do one for float right and left as well or any other styles you might want.

Upvotes: 70

jameh
jameh

Reputation: 1259

If you implement it in Python, there is an extension that lets you add HTML key/value pairs, and class/id labels. The syntax is for this is:

![A picture of a cat](cat.png){: style="float:right"}

Or, if embedded styling doesn't float your boat,

![A picture of a cat](cat.png){: .floatright}

with a corresponding stylesheet, stylish.css:

.floatright {
    float: right;
    /* etc. */
}

Upvotes: 9

abbood
abbood

Reputation: 23548

As greg said you can embed HTML content in Markdown, but one of the points of Markdown is to avoid having to have extensive (or any, for that matter) CSS/HTML markup knowledge, right? This is what I do:

In my Markdown file I simply instruct all my wiki editors to embed wrap all images with something that looks like this:

'<div> // Put image here  </div>`

(of course.. they don't know what <div> means, but that shouldn't matter)

So the Markdown file looks like this:

<div>
![optional image description][1]
</div>

[1]: /image/path

And in the CSS content that wraps the whole page I can do whatever I want with the image tag:

img {
   float: right;
}

Of course you can do more with the CSS content... (in this particular case, wrapping the img tag with div prevents other text from wrapping against the image... this is just an example, though), but IMHO the point of Markdown is that you don't want potentially non-technical people getting into the ins and outs of CSS/HTML.. it's up to you as a web developer to make your CSS content that wraps the page as generic and clean as possible, but then again your editors need not know about that.

Upvotes: 4

learnvst
learnvst

Reputation: 16195

I like to be super lazy by using tables to align images with the vertical pipe (|) syntax. This is supported by some Markdown flavours (and is also supported by Textile if that floats your boat):

| I am text to the left  | ![Flowers](/flowers.jpeg) |

or

| ![Flowers](/flowers.jpeg) | I am text to the right |

It is not the most flexible solution, but it is good for most of my simple needs, is easy to read in markdown format, and you don't need to remember any CSS or raw HTML.

Upvotes: 35

raphox
raphox

Reputation: 

<div style="float:left;margin:0 10px 10px 0" markdown="1">
    ![book](/images/book01.jpg)
</div>

The attribute markdown possibility inside Markdown.

Upvotes: 12

gerwitz
gerwitz

Reputation: 1116

Many Markdown "extra" processors support attributes. So you can include a class name like so (PHP Markdown Extra):

![Flowers](/flowers.jpeg){.callout}

or, alternatively (Maruku, Kramdown, Python Markdown):

![Flowers](/flowers.jpeg){: .callout}

Then, of course, you can use a stylesheet the proper way: 

.callout {
    float: right;
}

If yours supports this syntax, it gives you the best of both worlds: no embedded markup, and a stylesheet abstract enough to not need to be modified by your content editor.

Upvotes: 62

icarito
icarito

Reputation: 328

I liked learnvst's answer of using the tables because it is quite readable (which is one purpose of writing Markdown).

However, in the case of GitBook's Markdown parser I had to, in addition to an empty header line, add a separator line under it, for the table to be recognized and properly rendered:

| - | - |
|---|---|
| I am text to the left  | ![Flowers](/flowers.jpeg) |
| ![Flowers](/flowers.jpeg) | I am text to the right |

Separator lines need to include at least three dashes --- .

Upvotes: 8

yoyo
yoyo

Reputation: 69

Simplest is to wrap the image in a center tag, like so ...

<center>![Alt test](http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png)</center>

Anything to do with Markdown can be tested here - http://daringfireball.net/projects/markdown/dingus

Sure, <center> may be deprecated, but it's simple and it works!

Upvotes: -16

user142019
user142019

Reputation:

Embedding CSS is bad:

![Flowers](/flowers.jpeg)

CSS in another file:

img[alt=Flowers] { float: right; }

Upvotes: 28

ma11hew28
ma11hew28

Reputation: 126327

Even cleaner would be to just put p#given img { float: right } in the style sheet, or in the <head> and wrapped in style tags. Then, just use the markdown ![Alt text](/path/to/img.jpg).

Upvotes: 10

Related Questions