hide text from inbox preview MailChimp - html-email

While I have added inbox preview text for MailChimp, I would like to stop it also showing the 'view this email in your browser text' in the inbox preview text.
Is there a way to hide text from inbox preview in an html template for Mailchimp?

To fix this you will need a pre-header. A pre-header is a line of code you place just after the <body> opening tag which hides whatever is in it visually. Doing this - you can have what you want to display in the email preview without taking in any of the miscellaneous content (for example view in browser links).
<!--[if !mso]><!-->
<span style="display:none !important; visiblility:hidden; opacity:0px; color:transparent; height:0px; width:0px; mso-hide:all; max-height:0px; max-width:0px; line-height:0px; overflow:hidden;">Type your teaser content here.</span>
<!--<![endif]-->
In the above example of a preheader, you can see many different things going on. First up we have the <!--[if !mso]><!--> snippet. This will ensure anything encased between that and the <!--<![endif]--> statement will not be rendered in a Microsoft client. This is done because of Outlooks limited CSS support.
Next, we have a span stag with various CSS elements to hide the content within it. Then contained within the span tags is the content you'd want to appear in the preview of the email client.

Related

php mail() with <style> tag and background-size: cover

I want to style a contact email, but I have a few problems:
I sent a test-mail to my gmx mail and it removed the style="background: url('...') center center no-repeat; position: relative;". In the received code I only see style="position: relative;"
Like the first problem, but with "background-size: cover;" and "width: calc(50% - 3px);"
My <style> - tag got commented and looks like this:
Commenting CSS like that does not prevent it working - it just ensures the browser does not treat it as HTML.
gmail strips all classes and ids from HTML, so nothing you put in your style sheet based on those will work anyway. You can style standard elements though, and inline styles still work.
Outlook doesn't support background images at all, so you should probably give up on this path.

Gist -- how to set the height and width of an embedded Gist

For purposes of embedding very long Gists from Github in a Wordpress blog, what code will permit me to set the height so that vertical scroll-bars are generated? Something around 500px would be perfect.
EDIT: The issue is now resolved, but I spent so much time on this issue, I believe it would be helpful to have a thread dedicated to that issue. I've posted an answer below that is working.
<style type="text/css">
.gist {width:500px !important;}
.gist-file
.gist-data {max-height: 500px;max-width: 500px;}
</style>
<script src="https://gist.github.com/user-name/123456789.js"></script>
Example: Boilerplate webpage borrowed from : http://www.dummies.com/how-to/content/a-sample-web-page-in-html.html [The answer works as advertised as of February 24, 2016 with Firefox 44.0.2 on OSX Snow Leopard 10.6.8.]
<html>
<!-- Text between angle brackets is an HTML tag and is not displayed.
Most tags, such as the HTML and /HTML tags that surround the contents of
a page, come in pairs; some tags, like HR, for a horizontal rule, stand
alone. Comments, such as the text you're reading, are not displayed when
the Web page is shown. The information between the HEAD and /HEAD tags is
not displayed. The information between the BODY and /BODY tags is displayed.-->
<head>
<title>Enter a title, displayed at the top of the window.</title>
</head>
<!-- The information between the BODY and /BODY tags is displayed.-->
<style type="text/css">
.gist {width:300px !important;}
.gist-file
.gist-data {max-height: 300px;max-width: 300px;}
</style>
<body>
<h1>Enter the main heading, usually the same as the title.</h1>
<p>Be <b>bold</b> in stating your key points. Put them in a list: </p>
<ul>
<li>The first item in your list</li>
<li>The second item; <i>italicize</i> key words</li>
</ul>
<p>Improve your image by including an image. </p>
<p><img src="http://www.mygifs.com/CoverImage.gif" alt="A Great HTML Resource"></p>
<p>Add a link to your favorite Web site.
Break up your page with a horizontal rule or two. </p>
<hr>
<p>Finally, link to another page in your own Web site.</p>
<!-- And add a copyright notice.-->
<p>© Wiley Publishing, 2011</p>
<script src="https://gist.github.com/lawlist/12345678.js"></script>
</body>
</html>
None of the above answers work anymore. Here is the updated CSS that displays the gist correctly with visible scrollbars where needed.
.gist {
max-width:350px;
overflow:auto;
}
.gist .blob-wrapper.data {
max-height:200px;
overflow:auto;
}
See this blog post for example:
How to set custom height and width of embedded Github Gist.
They seem to have changed something, so now you need to do this:
<style type="text/css"> .gist {width:500px; overflow:auto} .gist .file-data {max-height: 500px;max-width: 500px;} </style>
If your gist is inside an iFrame, which is generated and you can't access since it's and embedded HTML, you might want to take a look at this.

Outlook.com put extra p around my spaces

I'm designing email template. Between some texts I need to put break lines. So far so good on most clients except outlook.com(on browser). It wraps my <br> inside a <p> which has big margin by default.
I have tried to use <br>, <td> with space, <td> with <span> and space inside and <td> with <p> with margin:0 and space inside. Each time i got my html wrapped in a <p>.
Why it wraps my html in <p> ??
I've never found the .ExternalClass hacks to be of any use. Outlook.com is very iffy in general about line-height and <p> tags as a whole, so I've found the best thing to do is remove all <p> tags from my emails just and put all text sections inside a <font> tag inside the <td>.
I ran a quick litmus test and wasn't able to reproduce your results, with either <br> or <br/> however you could just nest a table inside a <td>, don't define heights, and use multiple rows in that table to simulate breaks. I've found that it doesn't mess with my usual line-height rhythm.
Outlook has trouble rendering html emails correctly.
There is a little hack that might help you:
<style type="text/css">
.ExternalClass p (Or whatever, you can target pretty much anything here)
{line-height: 50%; margin:0;}
</style>
This will talk to outlook's native stylesheets and adjust those, since outlook applies the .ExternalClass class to your email.
Here is some important information on the subject: http://www.emailonacid.com/blog/details/C13/line_height_and_outlook.com
Many will say that all styling in html-emails has to be inline. This is true to an extent because some clients will strip the head and body tags from your email. But for those that don't, like outlook, it is a valuable space for work arounds.
Hope this helps.
The reason Outlook wraps everything in <p> tags is because it uses the MS Word engine to render html instead of a browser based renderer.
The p tags are unavoidable and the suggestions above are good ways to 'zero out' the unwanted margins. Outlook doesn't strip <style> tags, however some MS Exchange servers do (for security I assume), so if you are finding your style tags ignored in Outlook, try sending to a different domain email address (particularly a non corporate one) and you should find it will work as expected.
I also suggest never using <p> tags in email and using double <br> tags between paragraphs and <br> or <br> for top and bottom 'padding' within table cells.

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)<-

html email with background-image style not shown

I am creating an email template which has to display images from external website. I had placed some <img> tags for rendering the images and there are some <td> tags with background-image property set in inline css of the elements.
Now, when an email is received in outlook, the images are not displayed (this is expected as the images are not embedded). And I click the download images to see the images properly. The images in <IMG> tag are only shown and the background-image for the <TD> is not rendered.
Any views on solving this problem?
Thanks!
At last I found the answer.
Outlook 2007 does not use the Internet Explorer's rendering engine for loading HTML content. Instead it uses Word 2007 HTML and CSS capabilities.
Because of this CSS attributes such as background-image is not supported. And hence it's not possible to set a background image for HTML elements in outlook using standard CSS tags.
More info is available at http://msdn.microsoft.com/en-us/library/aa338201(v=office.12).aspx
Background images are not supported in Outlook. As a best practice, you should never use background images in HTML emails. If you must have a background, you can use and image PLUS a solid color. Those with email clients that support background images will get the images, and those that don't support it will fall back to the solid color.
There is actually a method to use background images in HTML emails in Outlook.
As Chaitanya mentions it can't be done with CSS, but it can be done via VML.
The technique is a bit more involved than using background: url(....) and I don't use it as frequently as I would use the CSS technique (if it worked in Outlook). But it is very useful.
I've used it successfully on a number of campaigns.
Full instructions here: including a list of email clients that support this technique.
http://www.campaignmonitor.com/forums/viewtopic.php?pid=14197
Also, here's a guide from Campaign Monitor: http://www.campaignmonitor.com/css/ which proved super helpful for me.
There is a way of displaying HTML images.
Right html emails rendered as MSWord document in outlook.
I got the solution from this https://stackoverflow.com/a/12693917/413032 post.
So we need an alternate.
In fact you may open your html email in MSWORD and finding what seems wrong and considering what can be an alternate gives idea.
Here is what I did ;
Added v namespace to html tag
< html xmlns:v="urn:schemas-microsoft-com:vml"
Added v's style to head block
< head >
<style type="”text/css”">
v\:* { behavior: url(#default#VML); display:inline-block}
</style>
In table or where you need add your MSWord alternate
<table style="background-image: url('https://e-telesaglik.com/images/email/canvas-bg.jpg');background-repeat:no-repeat;" cellpadding="0" width="960">
<!--[if gte vml 1]>
<v:shape
stroked='f'
style='position:absolute;margin-left:-90pt;margin-top:-1.55pt;
z-index:-503306481;
visibility:visible;
width:720pt;
height:475pt;
top:0;
left:0;
border:0;
'>
<v:imagedata src="https://e-telesaglik.com/images/email/canvas-bg.jpg"/>
</v:shape>
<![endif]-->
<tbody> ....
That is all.
Sure it will be a MSWord render. And more, as you notice we use absolute positioning...
Anyway this is a workaround and solves the issue in a way.
We hope one day MS-Outlook renders html e-mails with a web browser not with MS-Word.
This works in Gmail,
I tried this to show div with image in email newsletter, try inline css, sending email guidelines here