Using an image map in a github readme.md file

Using an image map in a github readme.md file - github

Is there any option to include an image in a readme.md file, which has a usemap attribute?
Pure html would be
<img src="myimage.png" usemap="#mymap"/>
<map name="mymap">
<area coords="1,1,40,40" href="mylink.html"/>
</map>
I can't get that to work for multiple reasons
usemap is retained as attribute but the map-block is removed. Not surprising as the map-tag is not on the html whitelist, if I am not mistaken.
An image map cannot be inside an anchor tag but github markdown renders it as
a-tag pointing to the raw file location and the img-tag inside.
I don't see any option, do you?

Okay, sort of a solution and the advice to use CSS, not img's usemap attribute.
The best answer I came up with was using github pages - these are static web pages hosted by github and therefore you can do everything you want there.
https://help.github.com/articles/creating-a-github-pages-site-with-the-jekyll-theme-chooser/
This creates a new branch gh-pages and only those html files are used. Very convenient as you do not have to checkin into the master branch for changes.
The endresult is not an image map inside the README.MD file, but there I have added a link to the github-pages index.html which is using the imagemap. The imagemap points back to the various github resources. So not inline the README.MD but one click away.
Second finding: Don't use image maps but CSS instead. Imagemap coords depend on the width of the image as rendered by the browser, not on the width of the image itself. As in github the standard is to use a max-width style property, the image often gets scaled down - and the coords of the imagemap are not.
Much better to use CSS - see "responsive image maps" - and percent values.
<p style="position: relative;">
<img ....>
<a style="position: absolute; top: 10%; left: 10%; width: 30%; height: 15%" href=....></a>
</p>
As both, the image and the anchor tag are inside a block element which is of position relative and the anchor tag is of position absolute, the anchor position is scaled with the image.

Related

How to change color and size of SVG image on github pages

I created a Github page following this tutorial: https://guides.github.com/features/pages/
I have my index.md and _config.yml file. I added a /images/font-awesome/address-card-solid.svg file to add this image https://fontawesome.com/icons/address-card.
I displayed the image by adding this to index.md
![useful image]({{ site.url }}/images/font-awesome/address-card-solid.svg)
It displays properly when I go to the site (username.github.io). But the image scales and takes up the whole screen, and also is only black and white in color. How do I make the image smaller and change the color of it? I am using Github markdown (modifying index.md file).
I tried importing the font-awesome CDN and using HTML to display the image but that does not show anything (as expected, as I am in a .md file).

You can use CSS, set color, or backgroundcolor. Be aware that the SVG includes a path object that maybe need also the CSS class.

<!DOCTYPE html>
<html>
<head>
<style>
img {
background-color: #FFFFFF;
}
</style>
</head>
<body>
<p align="center"><img src="image.svg" /></p>
</body>
</html>
This will set the background white only for the specified image in a .md file, it should support other css stuff as well did not try.

I Cannot set background image in ionic 4 div from template

I am building a mobile app with ionic and I am trying to change the background image of the div but its not working
Here is the code
<div style="background-image: url(./assets/IMG/set3.jpg);">
......
</div>
I also changed the file path to
style="background-image: url(assets/IMG/set3.jpg);"
style="background-image: url(./assets/IMG/set3.jpg);"
style="background-image: url(/assets/IMG/set3.jpg);"
And I have other div of such, but the background image is not displaying, pls I need your help, I have search online but non of the solutions worked

If your goal is to set background image to the entire page, you could use --background for ion-content. Something like following has worked for me.
ion-content {
--background: url('../../assets/BackgroundImages/splash-screen-background.png');
background-position: center center;
background-size:contain;
background-repeat: no-repeat;
}
here are more details about --background CSS property

Some IDEs (Visual Studio Code) allow you to ctrl click the url (follow link) and ensure that the resource is correctly pointed to. You may want to double check. Even otherwise please check if your assets folder is present at the same level as your page html. If it is not you may have to ensure the correct path, for ex.
background-image: url('../../assets/BackgroundImages/splash-screen-background.png');

Instead of setting the background-image directly with a style tag inside your <div>, give it a class. Then, inside your CSS, define the background-image on that class. That way, the IMG folder should be relative to the CSS file or the app-root. This always gets me with every new project, and it requires some trial and error to get it right.

What css can I use to crop image on the fly in an email template?

how to crop image for email template? I have an image that is of particular width (example 520px). I want to ensure that the height is never more than 150px. This is for email only... If I use max-height or just height css, then it gets pixelated? What other better option do I have?

Ideally, you would crop the image (either manually or programmatically), and have it stored somewhere (on a CDN), where you can embed the image, and it will display as intended.
If this ^ isn't an option, your limitations are based on what email clients you need to support.
I am using Campaign Monitor CSS as a reference.
Option 1: If you aren't concerned with supporting Outlook.com and/or Outlook 2007/10/13, you could set the image as a background property on an element as such:
<div style="
width: 520px;
height: 150px;
background-image: url(http://placehold.it/520x520)">
</div>
Here we are using a 520x520 (square) image, and setting the parent element to the desired size (520x150 as per your example).
Now you are faced with the issue of positioning the image background. As per the guide, if you attempt positioning, you will lose Gmail, which is probably a deal breaker. However, as an exercise, you could do this:
<div style="
width: 520px;
height: 150px;
background-image: url(http://placehold.it/520x520);
background-position: 50%;>
</div>
Now you've got an image positioned (centered), at your desired size. on an element.
Option 2: Is also limited to a specific set of clients. You could feasibly use position: relative, on the wrapper, and position: absolute, on the tag. Then use top, left properties to position.
Of course, you lose Yahoo, in addition to Outlook and Gmail.
HTML emails are tricky. I'm sure there are several other options out there. I hope this response gets you pointed in the right direction.

With various mail clients having limited support for html and CSS attributes you're going to have to have trouble achieving a cropped image affect using vanilla CSS and HTML techniques.
The following is supported by most mail clients other than Outlook and Outlook.com
<div style="
width: 520px;
height: 150px;
background-image: url(http://placehold.it/520x200.jpg)
"></div>
Unfortunately most mail clients have no support for clip, overflow:hidden or background-clip.
Even an embedded image has very little support. Send a base64 image in HTML email
The best solution would be to render a copy of the image as you need it without any CSS trickery. This is the only real solution to your problem.

Flow text around an image in (GitHub) Markdown

I have a narrow long image that I want to display at the top right of a README.md file on GitHub. I have been trying several things to get it aligned right and currently have
<p align="right">
<img src="doc/subpagelist.png" />
</p>
This works in that the image is aligned on the right side, though is rather useless as all content that is below in image in the Markdown file gets displayed under the bottom of the image, rather then to the left of it.
Is there a way to have the text flow around the image (without getting rid of headers and paragraphs)?

The align="right" (or left) attribute works in GitHub Markdown:
<img align="right" src="doc/subpagelist.png">

align="left" works fine. To break the alignment again, use a <br clear="left"/> (or <br clear="right"/>) tag:
<img src="/path/to/image.png" align="left" width="200px"/>
some text floating around the image
<br clear="left"/>
A "newline". This text doesn't float anymore, is left-aligned.

It works for me (only for jekyll, it does not work for Github markdown):
Put the code below in your content markdown (I have put it on the first line for better organization)
<style type="text/css">
.image-left {
display: block;
margin-left: auto;
margin-right: auto;
float: right;
}
</style>
And refers to your image as follows:
[![Proguard](./proguard-snippets.png)](http://www.thiengo.com.br/proguard-android){: .image-left } Your Text comes here...
Note the .image-left class besides the image url.
The final results are here: Movies of the Year jekyll github page

In markdown you can add extra attributes to tags. For instance I use this for what you intend to do:
![Some Title](http://placehold.it/image.jpeg){:style="float: right;margin-right: 7px;margin-top: 7px;"}

What you are describing is "floating" of an image, which allows text to flow around it. There are a number of good turtorials about floating in CSS if you want to learn more about this topic. In the mean time, to get an image to float in Markdown you can wrap the image in a div and float that div using:
<div style="float: right">
![Replace this with your image](http://placehold.it/85x85 "Title")
</div>

How do I center an image in the README.md file on GitHub?

I've been looking at the Markdown syntax used in GitHub for a while, but except resizing an image to the width of the README.md page, I can't figure out how to center an image in it.
Is this possible? If so, how can I do it?

This is from GitHub's support:
Markdown doesn't allow you to tweak alignment directly (see docs here: http://daringfireball.net/projects/markdown/syntax#img), but you can just use a raw HTML 'img' tag and do the alignment with inline css.
So it is possible to align images! You just have to use inline CSS to solve the problem. You can take an example from my GitHub repository. At the bottom of README.md there is a centered aligned image. For simplicity you can just do as follows:
<p align="center">
<img src="http://some_place.com/image.png" />
</p>
Although, as nulltoken said, it would be borderline against the Markdown philosophy!
This code from my README file:
<p align="center">
<img src="https://github.com/waldyr/Sublime-Installer/blob/master/sublime_text.png?raw=true" alt="Sublime's custom image"/>
</p>
It produces this image output, except centered when viewed on GitHub:
<p align="center">
<img src="https://github.com/waldyr/Sublime-Installer/blob/master/sublime_text.png?raw=true" alt="Sublime's custom image"/>
</p>

I've been looking at the Markdown syntax used in GitHub [...], I can't figure out how to center an image
TL;DR
No, you can't by only relying on Markdown syntax. Markdown doesn't care about positioning.
Note: Some Markdown processors support inclusion of HTML (as rightfully pointed out by #waldyr.ar), and in the GitHub case you may fallback to something like <div style="text-align:center"><img src="..." /></div>.
Beware that there's no guarantee the image will be centered if your repository is forked in a different hosting environment (CodePlex, Bitbucket, etc.) or if the document isn't read through a browser (Sublime Text Markdown preview, MarkdownPad, Visual Studio Web Essentials Markdown preview, ...).
Note 2: Keep in mind that even within the GitHub website, the way Markdown is rendered is not uniform. The wiki, for instance, won't allow such CSS positional trickery.
Unabridged version
The Markdown syntax doesn't provide one with the ability to control the position of an image.
In fact, it would be borderline against the Markdown philosophy to allow such formatting, as stated in the "Philosophy" section.
"A Markdown-formatted document should be publishable as-is, as plain text, without looking like it’s been marked up with tags or formatting instructions. "
Markdown files are rendered by github.com website through the use of the Ruby Redcarpet library.
Redcarpet exposes some extensions (such as strikethrough, for instance) which are not part of standard Markdown syntax and provide additional "features". However, no supported extension allow you to center an image.

TLDR:
Just jump straight down to look at the 4 examples (1.1, 1.2, 1.3, and 1.4) in the section below called "1. Centering and aligning images in GitHub readmes using the deprecated HTML align attribute"!
Also, view actual examples of this on GitHub in a couple readme markdown files in my repositories here:
https://github.com/ElectricRCAircraftGuy/eRCaGuy_hello_world/blob/master/markdown/github_readme_center_and_align_images.md
and https://github.com/ElectricRCAircraftGuy/eRCaGuy_hello_world#3-markdown
Background on how to center and align images in markdown:
So, it turns out that GitHub explicitly blocks/filters out all attempts at editing any form of CSS (Cascading Style Sheets) styles (including external, internal, and inline) inside GitHub *.md markdown files, such as readmes. See here (emphasis added):
Custom css file for readme.md in a Github repo
GitHub does not allow for CSS to affect README.md files through CSS for security reasons...
https://github.community/t/github-flavored-markdown-doesnt-render-css-styles-inside-a-html-block/126258/2?u=electricrcaircraftguy
Unfortunately you cannot use CSS in GitHub markdown as it is a part of the sanitization process.
The HTML is sanitized, aggressively removing things that could harm you and your kin—such as script tags, inline-styles, and class or id attributes.
source: https://github.com/github/markup
So, that means to center or align images in GitHub readmes, your only solution is to use the deprecated HTML align attribute (that happens to still function), as this answer shows.
I should also point out that although that solution does indeed work, it is causing a lot of confusion for that answer to claim to use inline css to solve the problem, since, like #Poikilos points out in the comments, that answer has no CSS in it whatsoever. Rather, the align="center" part of the <p> element is a deprecated HTML attribute (that happens to still function) and is NOT CSS. All CSS, whether external, internal, or inline is banned from GitHub readmes and explicitly removed, as indicated through trial-and-error and in the two references above.
This leads me to split my answer into two answers here:
"Centering and aligning images in GitHub readmes using the deprecated HTML align attribute", and
"Centering and aligning images using modern CSS in any markdown document where you also have control over CSS styles".
Option 2 only works in places where you have full control over CSS styles, such as in a custom GitHub Pages website you make maybe?
1. Centering and aligning images in GitHub readmes using the deprecated HTML align attribute:
This works in any GitHub *.md markdown file, such as a GitHub readme.md file. It relies on the deprecated HTML align attribute, but still works fine. You can see a full demo of this in an actual GitHub readme in my eRCaGuy_hello_world repo here: https://github.com/ElectricRCAircraftGuy/eRCaGuy_hello_world/blob/master/markdown/github_readme_center_and_align_images.md.
Notes:
Be sure to set width="100%" inside each of your <p> paragraph elements below, or else the entire paragraph tries to allow word wrap around it, causing weird and less-predicable effects.
To resize your image, simply set width="30%", or whatever percent you'd like between 0% and 100%, to get the desired effect! This is much easier than trying to set a pixel size, such as width="200" height="150", as using a width percent automatically adjusts to your viewer's screen and to the page display width, and it automatically resizes the image as you resize your browser window as well. It also avoids skewing the image into unnatural proportions. It's a great feature!
Options for the (deprecated) HTML align attribute include left, center, right, and justify.
1.1. Align images left, right, or centered, with NO WORD WRAP:
This:
**Align left:**
<p align="left" width="100%">
<img width="33%" src="https://i.stack.imgur.com/RJj4x.png">
</p>
**Align center:**
<p align="center" width="100%">
<img width="33%" src="https://i.stack.imgur.com/RJj4x.png">
</p>
**Align right:**
<p align="right" width="100%">
<img width="33%" src="https://i.stack.imgur.com/RJj4x.png">
</p>
Produces this:
If you'd like to set the text itself to left, center, or right, you can include the text inside the <p> element as well, as regular HTML, like this:
<p align="right" width="100%">
This text is also aligned to the right.<br>
<img width="33%" src="https://i.stack.imgur.com/RJj4x.png">
</p>
To produce this:
1.2. Align images left, right, or centered, WITH word wrap:
This:
**Align left (works fine):**
<img align="left" width="33%" src="https://i.stack.imgur.com/RJj4x.png">
[Arduino](https://en.wikipedia.org/wiki/Arduino) (/ɑːrˈdwiːnoʊ/) is an open-source hardware and software company, project and user community that designs and manufactures single-board microcontrollers and microcontroller kits for building digital devices. Its hardware products are licensed under a [CC-BY-SA][4] license, while software is licensed under the GNU Lesser General Public License (LGPL) or the GNU General Public License (GPL),[1] permitting the manufacture of Arduino boards and software distribution by anyone. Arduino boards are available commercially from the official website or through authorized distributors. Arduino board designs use a variety of microprocessors and controllers. The boards are equipped with sets of digital and analog input/output (I/O) pins that may be interfaced to various expansion boards ('shields') or breadboards (for prototyping) and other circuits.
**Align center (doesn't really work):**
<img align="center" width="33%" src="https://i.stack.imgur.com/RJj4x.png">
[Arduino](https://en.wikipedia.org/wiki/Arduino) (/ɑːrˈdwiːnoʊ/) is an open-source hardware and software company, project and user community that designs and manufactures single-board microcontrollers and microcontroller kits for building digital devices. Its hardware products are licensed under a CC-BY-SA license, while software is licensed under the GNU Lesser General Public License (LGPL) or the GNU General Public License (GPL),[1] permitting the manufacture of Arduino boards and software distribution by anyone. Arduino boards are available commercially from the official website or through authorized distributors. Arduino board designs use a variety of microprocessors and controllers. The boards are equipped with sets of digital and analog input/output (I/O) pins that may be interfaced to various expansion boards ('shields') or breadboards (for prototyping) and other circuits.
**Align right (works fine):**
<img align="right" width="33%" src="https://i.stack.imgur.com/RJj4x.png">
[Arduino](https://en.wikipedia.org/wiki/Arduino) (/ɑːrˈdwiːnoʊ/) is an open-source hardware and software company, project and user community that designs and manufactures single-board microcontrollers and microcontroller kits for building digital devices. Its hardware products are licensed under a CC-BY-SA license, while software is licensed under the GNU Lesser General Public License (LGPL) or the GNU General Public License (GPL),[1] permitting the manufacture of Arduino boards and software distribution by anyone. Arduino boards are available commercially from the official website or through authorized distributors. Arduino board designs use a variety of microprocessors and controllers. The boards are equipped with sets of digital and analog input/output (I/O) pins that may be interfaced to various expansion boards ('shields') or breadboards (for prototyping) and other circuits.
Produces this:
1.3. Align images side-by-side:
Reminder: MAKE SURE TO GIVE THE entire <p> paragraph element the full 100% column width (width="100%", as shown below) or else text gets word-wrapped around it, botching your vertical alignment and vertical spacing/formatting you may be trying to maintain!
This:
33% width each (_possibly_ a little too wide to fit all 3 images side-by-side, depending on your markdown viewer):
<p align="center" width="100%">
<img width="33%" src="https://i.stack.imgur.com/RJj4x.png">
<img width="33%" src="https://i.stack.imgur.com/RJj4x.png">
<img width="33%" src="https://i.stack.imgur.com/RJj4x.png">
</p>
32% width each (perfect size to just barely fit all 3 images side-by-side):
<p align="center" width="100%">
<img width="32%" src="https://i.stack.imgur.com/RJj4x.png">
<img width="32%" src="https://i.stack.imgur.com/RJj4x.png">
<img width="32%" src="https://i.stack.imgur.com/RJj4x.png">
</p>
31% width each:
<p align="center" width="100%">
<img width="31%" src="https://i.stack.imgur.com/RJj4x.png">
<img width="31%" src="https://i.stack.imgur.com/RJj4x.png">
<img width="31%" src="https://i.stack.imgur.com/RJj4x.png">
</p>
30% width each:
<p align="center" width="100%">
<img width="30%" src="https://i.stack.imgur.com/RJj4x.png">
<img width="30%" src="https://i.stack.imgur.com/RJj4x.png">
<img width="30%" src="https://i.stack.imgur.com/RJj4x.png">
</p>
Produces this:
I am aligning all paragraph <p> elements above to the center, but you can also align left or right, as shown in previous examples, to force the row of images to get aligned that way too. Example:
This:
Align the whole row of images to the right this time:
<p align="right" width="100%">
<img width="25%" src="https://i.stack.imgur.com/RJj4x.png">
<img width="25%" src="https://i.stack.imgur.com/RJj4x.png">
<img width="25%" src="https://i.stack.imgur.com/RJj4x.png">
</p>
Produces this (aligning the whole row of images according to the align attribute set above, or to the right in this case). Generally, center is preferred, as done in the examples above.
1.4. Use a Markdown table to improve vertical spacing of odd-sized/odd-shaped images:
Sometimes, with odd-sized or different-shaped images, using just the "row of images" methods above produces slightly awkward-looking results.
This code produces two rows of images which have good horizontal spacing, but bad vertical spacing. This code:
<p align="center" width="100%">
<img width="32%" src="photos/pranksta1.jpg">
<img width="32%" src="photos/pranksta2.jpg">
<img width="32%" src="photos/pranksta3.jpg">
</p>
<p align="center" width="100%">
<img width="32%" src="photos/pranksta4.jpg">
<img width="32%" src="photos/pranksta5.jpg">
<img width="32%" src="photos/pranksta6.jpg">
</p>
Produces this, since the last image in row 1 ("pranksta3.jpg") is a very tall image with 2x the height as the other images:
So, placing those two rows of images inside a markdown table forces nice-looking vertical spacing. Notice in the markdown table below that each image is set to have an HTML width attribute set to 100%. This is because it is relative to the table cell the image sits in, NOT relative to the page column width anymore. Since we want each image to fill the entire width of each cell, we set their widths all to width="100%".
This markdown table with images in it:
| | | |
|-----------------------------------------------|-----------------------------------------------|-----------------------------------------------|
| <img width="100%" src="photos/pranksta1.jpg"> | <img width="100%" src="photos/pranksta2.jpg"> | <img width="100%" src="photos/pranksta3.jpg"> |
| <img width="100%" src="photos/pranksta4.jpg"> | <img width="100%" src="photos/pranksta5.jpg"> | <img width="100%" src="photos/pranksta6.jpg"> |
Produces this, which looks much nicer and more well-spaced in my opinion, since vertical spacing is also centered for each row of images:
2. Centering and aligning images using modern CSS in any markdown document where you also have control over CSS styles:
This works in any markdown file, such as a GitHub Pages website maybe?, where you do have full control over CSS styles. This does NOT work in any GitHub *.md markdown file, such as a readme.md, therefore, because GitHub expliclty scans for and disables all custom CSS styling you attempt to use. See above.
TLDR;
Use this HTML/CSS to add and center an image and set its size to 60% of the screen space width inside your markdown file, which is usually a good starting value:
<img src="https://i.stack.imgur.com/RJj4x.png"
style="display:block;float:none;margin-left:auto;margin-right:auto;width:60%">
Change the width CSS value to whatever percent you want, or remove it altogether to use the markdown default size, which I think is 100% of the screen width if the image is larger than the screen, or it is the actual image width otherwise.
Done!
Or, keep reading for a lot more information.
Here are various HTML and CSS options which work perfectly inside markdown files, so long as CSS is not explicitly forbidden:
1. Center and configure (resize) ALL images in your markdown file:
Just copy and paste this to the top of your markdown file to center and resize all images in the file (then just insert any images you want with normal markdown syntax):
<style>
img
{
display:block;
float:none;
margin-left:auto;
margin-right:auto;
width:60%;
}
</style>
Or, here is the same code as above but with detailed HTML and CSS comments to explain exactly what is going on:
<!-- (This is an HTML comment). Copy and paste this entire HTML `<style>...</style>` element (block)
to the top of your markdown file -->
<style>
/* (This is a CSS comment). The below `img` style sets the default CSS styling for all images
hereafter in this markdown file. */
img
{
/* Default display value is `inline-block`. Set it to `block` to prevent surrounding text from
wrapping around the image. Instead, `block` format will force the text to be above or below the
image, but never to the sides. */
display:block;
/* Common float options are `left`, `right`, and `none`. Set to `none` to override any previous
settings which might have been `left` or `right`. `left` causes the image to be to the left,
with text wrapped to the right of the image, and `right` causes the image to be to the right,
with text wrapped to its left, so long as `display:inline-block` is also used. */
float:none;
/* Set both the left and right margins to `auto` to cause the image to be centered. */
margin-left:auto;
margin-right:auto;
/* You may also set the size of the image, in percent of width of the screen on which the image
is being viewed, for example. A good starting point is 60%. It will auto-scale and auto-size
the image no matter what screen or device it is being viewed on, maintaining proporptions and
not distorting it. */
width:60%;
/* You may optionally force a fixed size, or intentionally skew/distort an image by also
setting the height. Values for `width` and `height` are commonly set in either percent (%)
or pixels (px). Ex: `width:100%;` or `height:600px;`. */
/* height:400px; */
}
</style>
Now, whether you insert an image using markdown:
![](https://i.stack.imgur.com/RJj4x.png)
Or HTML in your markdown file:
<img src="https://i.stack.imgur.com/RJj4x.png">
...it will be automatically centered and sized to 60% of the screenview width, as described in the comments within the HTML and CSS above. (Of course the 60% size is really easily changeable too, and I present simple ways below to do it on an image-by-image basis as well).
2. Center and configure images on a case-by-case basis, one at a time:
Whether or not you have copied and pasted the above <style> block into the top of your markdown file, this will also work, as it overrides and takes precedence over any file-scope style settings you may have set above:
<img src="https://i.stack.imgur.com/RJj4x.png" style="display:block;float:none;margin-left:auto;margin-right:auto;width:60%">
You can also format it on multiple lines, like this, and it will still work:
<img src="https://i.stack.imgur.com/RJj4x.png"
alt="this is an optional description of the image to help the blind and show up in case the
image won't load"
style="display:block; /* override the default display setting of `inline-block` */
float:none; /* override any prior settings of `left` or `right` */
/* set both the left and right margins to `auto` to center the image */
margin-left:auto;
margin-right:auto;
width:60%; /* optionally resize the image to a screen percentage width if you want too */
">
3. In addition to all of the above, you can also create CSS style classes to help stylize individual images:
Add this whole thing to the top of your markdown file.
<style>
/* By default, make all images center-aligned, and 60% of the width
of the screen in size */
img
{
display:block;
float:none;
margin-left:auto;
margin-right:auto;
width:60%;
}
/* Create a CSS class to style images to left-align, or "float left" */
.leftAlign
{
display:inline-block;
float:left;
/* provide a 15 pixel gap between the image and the text to its right */
margin-right:15px;
}
/* Create a CSS class to style images to right-align, or "float right" */
.rightAlign
{
display:inline-block;
float:right;
/* provide a 15 pixel gap between the image and the text to its left */
margin-left:15px;
}
</style>
Now, your img CSS block has set the default setting for images to be centered and 60% of the width of the screen space in size, but you can use the leftAlign and rightAlign CSS classes to override those settings on an image-by-image basis.
For example, this image will be center-aligned and 60% in size (the default I set above):
<img src="https://i.stack.imgur.com/RJj4x.png">
This image will be left-aligned, however, with text wrapping to its right, using the leftAlign CSS class we just created above!
<img src="https://i.stack.imgur.com/RJj4x.png" class="leftAlign">
It might look like this:
You can still override any of its CSS properties via the style attribute, however, such as width, like this:
<img src="https://i.stack.imgur.com/RJj4x.png" class="leftAlign" style="width:20%">
And now you'll get this:
4. Create 3 CSS classes, but don't change the img markdown defaults
Another option to what we just showed above, where we modified the default img property:value settings and created 2 classes, is to just leave all the default markdown img properties alone, but create 3 custom CSS classes, like this:
<style>
/* Create a CSS class to style images to center-align */
.centerAlign
{
display:block;
float:none;
/* Set both the left and right margins to `auto` to cause the image to be centered. */
margin-left:auto;
margin-right:auto;
width:60%;
}
/* Create a CSS class to style images to left-align, or "float left" */
.leftAlign
{
display:inline-block;
float:left;
/* provide a 15 pixel gap between the image and the text to its right */
margin-right:15px;
width:60%;
}
/* Create a CSS class to style images to right-align, or "float right" */
.rightAlign
{
display:inline-block;
float:right;
/* provide a 15 pixel gap between the image and the text to its left */
margin-left:15px;
width:60%;
}
</style>
Use them, of course, like this:
<img src="https://i.stack.imgur.com/RJj4x.png" class="centerAlign" style="width:20%">
Notice how I manually set the width property using the CSS style attribute above, but if I had something more complicated I wanted to do, I could also create some additional classes like this, adding them inside the <style>...</style> block above:
/* custom CSS class to set a predefined "small" size for an image */
.small
{
width:20%;
/* set any other properties, as desired, inside this class too */
}
Now you can assign multiple classes to the same object, like this. Simply separate class names by a space, NOT a comma. In the event of conflicting settings, I believe whichever setting comes last will be the one that takes effect, overriding any previously-set settings. This should also be the case in the event you set the same CSS properties multiple times in the same CSS class or inside the same HTML style attribute.
<img src="https://i.stack.imgur.com/RJj4x.png" class="centerAlign small">
5. Consolidate Common Settings in CSS Classes:
The last trick is one I learned in this answer here: How can I use CSS to style multiple images differently?. As you can see above, all 3 of the CSS align classes set the image width to 60%. Therefore, this common setting can be set all at once like this if you wish, then you can set the specific settings for each class afterwards:
<style>
/* set common properties for multiple CSS classes all at once */
.centerAlign, .leftAlign, .rightAlign {
width:60%;
}
/* Now set the specific properties for each class individually */
/* Create a CSS class to style images to center-align */
.centerAlign
{
display:block;
float:none;
/* Set both the left and right margins to `auto` to cause the image to be centered. */
margin-left:auto;
margin-right:auto;
}
/* Create a CSS class to style images to left-align, or "float left" */
.leftAlign
{
display:inline-block;
float:left;
/* provide a 15 pixel gap between the image and the text to its right */
margin-right:15px;
}
/* Create a CSS class to style images to right-align, or "float right" */
.rightAlign
{
display:inline-block;
float:right;
/* provide a 15 pixel gap between the image and the text to its left */
margin-left:15px;
}
/* custom CSS class to set a predefined "small" size for an image */
.small
{
width:20%;
/* set any other properties, as desired, inside this class too */
}
</style>
More Details:
1. My thoughts on HTML and CSS in Markdown
As far as I'm concerned, anything which can be written in a markdown document and get the desired result is all we are after, not some "pure markdown" syntax.
In C and C++, the compiler compiles down to assembly code, and the assembly is then assembled down to binary. Sometimes, however, you need the low-level control that only assembly can provide, and so you can write inline assembly right inside of a C or C++ source file. Assembly is the "lower level" language and it can be written right inside C and C++.
So it is with markdown. Markdown is the high-level language which is interpreted down to HTML and CSS. However, where we need extra control, we can just "inline" the lower-level HTML and CSS right inside of our markdown file, and it will still be interpreted correctly. In a sense, therefore, HTML and CSS are valid "markdown" syntax.
So, to center an image in markdown, use HTML and CSS.
2. Standard image insertion in markdown:
How to add a basic image in markdown with default "behind-the-scenes" HTML and CSS formatting:
This markdown:
![](https://i.stack.imgur.com/RJj4x.png)
Will produce this output:
This is my fire-shooting hexacopter I made.
You can also optionally add a description in the opening square brackets. Honestly I'm not even sure what that does, but perhaps it gets converted into an HTML <img> element alt attribute, which gets displayed in case the image can't load, and may be read by screen readers for the blind. So, this markdown:
![this is my hexacopter I built](https://i.stack.imgur.com/RJj4x.png)
will also produce this output:
3. More details on what's happening in the HTML/CSS when centering and resizing an image in markdown:
Centering the image in markdown requires that we use the extra control that HTML and CSS can give us directly. You can insert and center an individual image like this:
<img src="https://i.stack.imgur.com/RJj4x.png"
alt="this is my hexacopter I built"
style="display:block;
float:none;
margin-left:auto;
margin-right:auto;
">
Here's more info. on what is going on here:
The <img part of the above code is the HTML "start tag", while the > at the end is the HTML "end tag".
Everything from the start tag to the end tag, inclusive, makes up this HTML img "element".
HTML img "tags"/"elements" are used to insert images into HTML.
Each of the assignments inside the element is configuring an HTML "attribute".
The "style" attribute accepts CSS styling, so everything inside the double quotes here: style="" is a CSS property:value key-value "declaration".
Note that each CSS "property:value declaration" is separated by a semicolon (;), whereas each HTML "attribute" in this "element" is separated by a space ( ).
To get the image to center in our HTML and CSS code above, the key "attributes" are simply the src and style ones.
The alt one is optional.
Inside the HTML style attribute, which accepts CSS styling, the key declarations are all 4 that I show: display:block, float:none, margin-left:auto, and margin-right:auto.
If nothing has previously set the float property before, then you can leave off this declaration, but it's a good idea to have it anyway just in case.
If first learned how to center an image using HTML and CSS here: https://www.w3schools.com/howto/howto_css_image_center.asp.
CSS uses C-style comments (/* my comment */).
References:
GeeksForGeeks: HTML | <p> align Attribute
Read more about CSS Syntax here: https://www.w3schools.com/css/css_syntax.asp
Read about "HTML Tags vs Elements" here.
I learned just about everything I know about HTML and CSS by clicking around on w3schools.com. Here's a few specific pages:
%%%%%https://www.w3schools.com/howto/howto_css_image_center.asp
https://www.w3schools.com/css/css_float.asp
https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_float2
https://www.w3schools.com/css/css3_images.asp
https://www.w3schools.com/tags/default.asp
HTML and CSS comments: https://www.w3schools.com/css/css_comments.asp
My fire-shooting hexacopter I made: https://www.electricrcaircraftguy.com/2016/05/battlebots-season-2-buzz-fire-drone.html

Alternatively, if you have control of the CSS content, you could get clever with URL parameters and CSS.
Markdown:
![A cute kitten](http://placekitten.com/200/300?style=centerme)
And CSS:
img[src$="centerme"] {
display:block;
margin: 0 auto;
}
You could create a variety of styling options this way and still keep the Markdown content clean of extra code. Of course, you have no control over what happens if someone else uses the Markdown somewhere else, but that’s a general styling issue with all Markdown documents one shares.

For left alignment
<img align="left" width="600" height="200" src="https://www.python.org/python-.png">
For right alignment
<img align="right" width="600" height="200" src="https://www.python.org/python-.png">
And for center alignment
<p align="center">
<img width="600" height="200" src="https://www.python.org/python-.png">
</p>
Fork it here for future references, if you find this useful.

It works for me on GitHub
<p align="center">
<img src="...">
</p>

We can use the following. Please change the src location of your image from the Git folder and add the alternate text if the image is not loaded:
<p align="center">
<img src="your image URL here" alt="alternate text">
</p>

My way to resolve the problem with image positioning was to use the HTML attributes:
![Image](Image.svg){ width="800" height="600" style="display: block; margin: 0 auto" }
The image was resized and centered properly, at least in my local Visual Studio Community Markdown renderer.
Then, I have pushed changes to repository and unfortunately realized that it is not working for GitHub README.md file. Nevertheless I will left this answer as it might help someone else.
So finally, I have ended up using good old HTML tag instead:
<img src="Image.svg" alt="Image" width="800" height="600" style="display: block; margin: 0 auto" />
But guess what? Some JavaScript method replaced my style attribute! I have even tried class attribute and with the same result!
Then I have found following gist page where even more old-school HTML was used:
<p align="center">
<img src="Image.svg" alt="Image" width="800" height="600" />
</p>
This one is working fine however, and I would like to leave it without further comments...

You can also resize the image to the desired width and height. For example:
<p align="center">
<img src="https://anyserver.com/image.png" width="750px" height="300px"/></p>
To add a centered caption to the image, just one more line:
<p align="center">This is a centered caption for the image<p align="center">
Fortunately, this works both for README.md and the GitHub Wiki pages.

Just go to the Readme.md file and use this code.
<div align="center">
<img src=https://newfastuff.com/wp-content/uploads/2019/05/bW7QXVB.png" >
<p>Perfectly balanced</p>
</div>
<div align=”center”> [ Your content here ]</div> fits everything in the page and center aligns it according to the dimensions of the page.

To extend the answer a little bit to support local images, just replace FILE_PATH_PLACEHOLDER with your image path and check it out.
<p align="center">
<img src="FILE_PATH_PLACEHOLDER">
</p>

A "pure" Markdown approach that can handle this is adding the image to a table and then centering the cell:
| ![Image](img.png) |
| :--: |
It should produce HTML similar to this:
<table>
<thead>
<tr>
<th style="text-align:center;"><img src="img.png" alt="Image"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>

I found a solution for Github that avoids the use of the deprecated align attribute. It also avoids needing to fill with &nbsp. I made a transparent 1920x5 line.png with width="100%" and made that the last row of every column. This spaces each column equally.
||
|:--:|
| <img width=200px src="image.png" alt="image alt text"> |
| <img width="100%" src="line.png"> |

Table Approach
Another approach is using a table.
<table>
<tr>
<td valign="center">
<span style="margin-bottom: 10px;"> Some Text </span>
</td>
<td valign="center">
<img src="https://github-readme-stats.vercel.app/api?username=hossein13m&show_icons=true&title_color=ffffff&icon_color=34abeb&text_color=daf7dc&bg_color=151515"/>
</td>
</tr>
</table>
Keep in mind that this will work on the GitHub readme files but not on the code snippets here on StackOverflow.

If modifying the image is not a problem for you, and
if you know the approximate width of the container that will display your markdown, and
if your image is used in one place only (for example a README used only in GitHub),
then you can edit your image in an image editor and pad it equally on both sides.
Before padding:
After padding:
Original image (width = 250px):
Padded image (width = 660px):

I don't know why no one mentioned about the <center> tag. refer doc for more reading.
<center>
<h1>Hola App</h1>
<img src="root/static/assets/img/beer.svg">
</center>

This is quite simple really.
-> This is centered Text <-
So keeping that in mind, you can apply this to the img syntax.
->![alt text](/link/to/img)<-

We Keep Coding

iphone swift flutter scala powershell matlab mongodb postgresql perl eclipse