I want to end up with:
Hello there!
<image>
This is an image
Hi!
Where the image and the text This is an image are centered on the page. How do I accomplish this with Markdown?
Edit: Note that I'm looking to horizontally center the image and text on the page.
I figured that I'd just have to use HTML where I want to horizontally align anything.
So my code would look like this:
Hello there!
<center><img src="" ...></center>
<center>This is an image</center>
Hi!
I think I have a simple solution that will work given that you can define CSS. It also does not require any extensions or HTML! First your markdown image code:
Note the added url hash #center.
Now add this rule in CSS:
img[src*='#center'] {
display: block;
margin: auto;
}
You should be able to use a url hash like this, almost like defining a class name.
To see this in action, check out my JSFiddle using SnarkDown to parse MarkDown in a textarea - https://jsfiddle.net/tremor/6s30e8vr/
If you are using kramdown, you can do this
Hello there!
{:.center}
This is an image
Hi!
.center {
text-align: center;
}
In Mou (and perhaps Jekyll) this is quite simple.
-> This is centered Text <-
So taking that in mind you can apply this to the img syntax.
-><-
This syntax doesn't work for Markdown implementations that implement only what is documented on Daring Fireball.
You need a block container with a defined height, same value for line-height and image with vertical-align:middle;
It should work.
Hello there !
<div id="container">
<img />
This is an image
</div>
Hi !
#container {
height:100px;
line-height:100px;
}
#container img {
vertical-align:middle;
max-height:100%;
}
I'm surprised no one mentioned this way:
Hello there!
<p align="center">
<img src="">
This is an image
</p>
Hi!
With kramdown (used by githubpages)
{: style="text-align:center"}
That is, while there is value in the items on
the right, we value the items on the left more.
Or using the response from #(Steven Penny)
{:.mycenter}
That is, while there is value in the items on
the right, we value the items on the left more.
<style>
.mycenter {
text-align:center;
}
</style>
Here is a simple solution that does not use any deprecated tags or attributes:
Hello there!
<img style="display: block; margin: auto;"
src="https://stackoverflow.design/assets/img/logos/so/logo-print.svg">
<p style="text-align: center;">
This is an image
</p>
Hi!
Related
I don't know if this is possible or not, but any help would be very appreciated.
I have this code in my HTML:
<img src="mountains.jpeg" class="green inline-image" data-caption="A picture of mountains!">
where data-caption is a custom attribute.
I want to do something like this.
As you can see, the data-caption has to be in a small box right under the image, with the exact width as the image. I don't know if this is possible or not, so can you recommend an alternative way if not?
I tried doing something like this:
<img src="mountains.jpeg" class="green inline-image">
<div class="photo-caption">
A picture of mountains!
</div>
CSS:
.inline-image {
width:30%;
}
.photo-caption {
width:30%;
background-color:blue;
}
This works, but I'd prefer to not have to make a new <div> for every caption. I'd rather have it in the <img> tag.
Thank you very much!
Yeah it's possible using css content but problem in your case is you are using it on an img element which won't work on some browsers.
A different approach I would suggest is to insert your img element inside a div and have that custom attribute in there.
html:
<div class="img-block" data-caption="A picture of mountains!">
<img src="mountains.jpeg" class="green inline-image" >
</div>
css
.img-block:after {
content: attr(data-caption);
}
Reference
What is the best way to have text and then an image with text following? I dont want to use table if possible but I am running into issues with the items breaking onto their own lines.
Below is my code and css so far:
<div id="header_number">
<h2 class="phone_title">Call Us Today!</h2>
<img src="images/phone_icon.jpg" alt="Call us Today"/>
<h2 class="large_num">1-800-555-9999</h2>
</div>
CSS:
h2.phone_title{font: 13px arial;Color:#013173;text-align:left;}
h2.large_num{font:29px arial;Color:#013173;text-align:left;}
#header_number{float:right;height:60px;width:332px;display:inline;}
I thought the display:inline; in the container div (header_number) would line everything up but that didn't work. If needed I can add a class to the img and float everything left if that is my only option.
Now Define your some element display:inline-block; or vertical-align:top
as like this
h2.phone_title, h2.large_num, img
{display:inline-block;vertical-align:top;
margin:0;
}
Now check to live demo
I am working with a system that outputs the following syntax (which I can't change)
<body>
<div class="page">
<center>
[The page contents]
</center>
</div>
</body>
I would like to nullify the formatting on the <center> element as it is messing with my responsive layout. Any ideas how to nullify the style on this element?
What about using jQuery to rewrite the content of the after-the-fact? Something like:
$(".page").replaceWith($(".page center").contents());
See it in action: http://jsfiddle.net/5fuBm/1/
It depends on exactly what you need to do, but you can use css on the center element like so:
center {
text-align: left;
}
or maybe:
center {
float: left;
}
Try out some different things and see what works best.
For example in the below image I want keep the text always vertically aligned in all condition. even if text is in one, two or three lines.
means the text should be vertically centered always. I don't want to add extra span
<div>
<img src=abc.jpg"> Hello Stackoverflow. Thank you for help me
</div>
I want to achieve with this html.
Edit
And I don't want to give fix width and height to any element
Chris Coyier wrote an excellent tutorial on just this: http://css-tricks.com/vertically-center-multi-lined-text/
I've used it myself, and it works perfectly.
try with
HTML
<div>
<img src="" height="155px" width="155px" style="float:left">
<div class="imageText">Hiiii <br/> how r u? <br/> use multiple lines</div>
</div>
CSS
.imageText {
display: table-cell; // this says treat this element like a table cell
vertical-align:middle;
border:1px solid red;
height:150px;
width:150px;
text-align:left;
}
DEMO
Note: width and height matters
I really like the method described # http://reisio.com/examples/vertcenter/
How can I right-align an image using CSS.
I do not want the text to wrap-around the image. I want the right aligned image to be on a line by itself.
<img style="float: right;" alt="" src="http://example.com/image.png" />
<div style="clear: right">
...text...
</div>
jsFiddle.
img {
display: block;
margin-left: auto;
}
Float the image right, which will at first cause your text to wrap around it.
Then whatever the very next element is, set it to { clear: right; } and everything will stop wrapping around the image.
There are a few different ways to do this but following is a quick sample of one way.
<img src="yourimage.jpg" style="float:right" /><div style="clear:both">Your text here.</div>
I used inline styles for this sample but you can easily place these in a stylesheet and reference the class or id.
To make the image move right:
float: right;
To make the text not wrapped:
clear: right;
For best practice, put the css code in your stylesheets file. Once you add more code, it will look messy and hard to edit.
My workaround for this issue was to set display: inline to the image element.
With this, your image and text will be aligned to the right if you set text-align: right from a parent container.
Easier / more organized way to do this is with some css.
CSS Above, HTML below with the snippet.
div {
clear: right;
}
/*
img {
float:right
}*/
/* img part is unneeded unless you want it to be a image on the right the whole time */
<html>
<!-- i am using an image from my website as a quick example-->
<img src="https://raw.githubusercontent.com/ksIsCute/GtGraffiti/gh-pages/icon.ico" alt="my image!" style=float:right>
<div>My Text Here</div>
<!-- Text goes below the image, and not beside it.-->
<img src="https://raw.githubusercontent.com/ksIsCute/GtGraffiti/gh-pages/icon.ico" alt="my image!" style=float:right>
<div>
<h1> I support headers! </h1>
<blockquote> And blockquotes!! </blockquote>
and hyperlinks!
</div>
<!-- THE CODE BELOW HERE IS **NOT** NEEDED!! (except for the </html>) -->
<h2 style="text-align:center;color:Grey;font-family:verdana"> Honestly I hope this helped you, if there is any error to my work please feel free to tell me. </h2>
</html>