I want to center align an image in a README.adoc file in GitHub.
I know that for Markdown files, adding HTML like the following works:
<p align="center">
<img width="460" height="300" src="http://www.fillmurray.com/460/300">
</p>
However, I want to write the file in AsciiDoc, not Markdown.
What I have tried but has not worked
Suppose there is a map.png image in the same dir as the README.
image::map.png[A map, 350, align=center]
This displays the correct image, but aligned to the left.
GitHub is using Asciidoctor but strips away CSS classes and inline CSS styles. As a workaround you can use a passthrough (which is not ideal):
++++
<p align="center">
<img width="460" height="300" src="http://www.fillmurray.com/460/300">
</p>
++++
You can also comment/vote for this issue: https://github.com/github/markup/issues/984
I recommend using a conditional block to use this passthrough only when the README is rendered on GitHub:
ifdef::env-github[]
++++
<p align="center">
<img width="460" height="300" src="http://www.fillmurray.com/460/300">
</p>
++++
endif::[]
ifndef::env-github[]
image::map.png[A map, 350, align=center]
endif::[]
Related
I'm having a hard time centering my netlify badge on my readme, using a p tag with an align of "center" doesn't seem to work. What would be the proper way?
This is the code I have so far:
<p align="center">
[](https://app.netlify.com/sites/darienmiller/deploys)
</p>
Markdown doesn't allow you to tweak alignment directly
Use an img tag instead of markdown.
<p align="center">
<img src="https://api.netlify.com/api/v1/badges/bc438b2e-9f12-4bbe-987e-d36fcef20a2f/deploy-status">
</p>
If you review the generated HTML by the Markdown method, your paragraph tag is terminated before the image, preventing the centering from being applied.
I am using the following code to insert an image in Jupyter notebook which is compatible with html conversion:
from IPython.display import Image
Image(filename="picture.jpg")
This works nicely except the fact that it is left aligned and I need it centre/middle aligned.
Is there any method that I can set it to be aligned correctly?
This works for me:
<center><img src="picture.jpg"/></center>
You can set the cell as markdown and use this content:
<img src="picture.jpg" width="240" height="240" align="center"/>
Then run it.
Edit1
Alternatively, you can use a code cell with this code:
from IPython.display import HTML
html1 = '<img src="picture.jpg" width="240" height="240" align="center"/>'
HTML(html1)
Many browsers (Chrome, Firefox) are only supporting HTML 5, so this syntax no longer works, even within the notebook itself.
<img src="picture.jpg" align="center"/>
because align="center" has been deprecated. Now you should use CSS style properties and the various margin definitions.
<img src="picture.jpg" style="margin-left:auto; margin-right:auto"/>
or
<img src="picture.jpg" style="margin:auto"/>
See here for more discussion around this. This makes it look properly centered while being displayed in your Notebook. But frustratingly doesn't work (still left justified) when you export your notebook to HTML. Inspecting the HTML that is generated you find that the <img> is embedded in a <p> element and this throws the whole thing off. So you have to add an additional display=block property, making the whole thing
<img src="picture.jpg" style="display=block; margin:auto"/>
This will center the image in your notebook, exported HTML, and exported Markdown files. Thanks to these guys for the tip on the display=block bit.
To get a centered bit of text underneath the image (like a figure title) I throw in a
<p style="text-align: center">
<b>Figure N. My Cool Figure</b>
</p>
afterwards. The whole setup is then
<img src="picture.jpg" style="display=block; margin:auto"/>
<p style="text-align: center">
<b>Figure N. My Cool Figure</b>
</p>
I am using TinyMCE editor and I found that text inside a Heading <H1> tag which includes an anchor tag (<A>) is removed - the anchor link and its contents are getting removed.
What can I do so that the anchor link does not get removed?
You can use the following source code to test result. When we paste below lines in source code.
<div style="text-align: center;">
<h1>
<a href="http://example.com" target="_blank">
<font color="blue">This is a New Link.</font>
</a>
</h1>
</div>
and when we switch to Editor View then the below output we got:
<div style="text-align: center;">
<h1>This is a New Link</h1>
</div>
output as below:
Here is a screenshot of what I get in TinyMCE
regard
vik
As far as I can see, centering a Github footer is very hard. So far, I have tested:
<div style="center code">Footer</div>
<span style="center code">Footer</span>
|Message to be centered|
|:--------------------:|
All three have not worked. Is there a way that works in footers?
This should work.
<p align="center">
<div class="footer">
© Example Stack Footer
</div>
</p>
Wee need to use some inline css to make it works.
Take a look a this docs
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:
[](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:
{: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">
</div>