HomeОбразованиеRelated VideosMore From: JavaScript Teacher

How to center an image in HTML

262 ratings | 52081 views
Hey guys, my book CSS Visual Dictionary – https://www.amazon.com/dp/1983065633 Explains all of this and more with 150+ visual diagrams in detail! In this tutorial I am going to briefly go over how to center align an image in HTML. Placing the image in the middle of your page, can be done via inline CSS "style" attribute within the element tag. Centered images can also be done by wrapping the element in "center" tags. The result of this code is an image nicely aligned to the middle of the screen in your browser. All you need to start is your favorite text editor and Chrome (or other) browser. You can use the HTML center tag, but more commonly web developers use style attribute to accomplish the same task. The quick HTML way is, just be careful because although it is becoming outdated in HTML5 it will still work. <center><img src = "lion.jpg"></center> Using CSS attribute: <img src = "lion.jpg" style = "display:block; margin-left: auto; margin-right: auto;"> or <img src = "lion.jpg" style = "display: block; margin: 0 auto;"> Or use the same CSS code within "style" attribute, but move it to your style tag inside the head tag, in your HTML page: <style type = "text/css"> img { display: block; margin: 0 auto; } </style>
Html code for embedding videos on your blog
Text Comments (79)
ajay jethwa (26 days ago)
Thank YOU, simple to understand.
JavaScript Teacher (26 days ago)
Glad to be of help. . . you may also want to look into Flexbox (display: flex;) It came out after I recorded this tutorial. As well as... CSS grid (display: grid;) also gives you a "multi-directional float", where you can align image to any corner or side of the container element.
Manoj Jayawardana (27 days ago)
Classic tutorial! No mind bending graphics, no bullshit, straight to the content and it works!!! Great video. Thanks a lot!
14dj (1 month ago)
thank you, I been looking for a way to place the img there :D
JavaScript Teacher (1 month ago)
You're welcome.
Steven Duquette (1 month ago)
awesome, that worked
JavaScript Teacher (1 month ago)
Good to know.
Zenzeki (1 month ago)
doesn't work
SUBRAT SHAH (1 month ago)
none of them works
Joe Marie Pines (1 month ago)
Thnks you help me .. But i'm trying like this /blah/blah/image/blah/blah iwant image in the center and the text well right and left ..
JavaScript Teacher (1 month ago)
You might need to start looking into flex or css grid.
Pierre Odendaal (2 months ago)
None of them works
Jeremy Malies (3 months ago)
It worked for me. Excellent. Thank you.
TommyPKFire (3 months ago)
That could've been 5 minutes shorter lol
lingala bharath (3 months ago)
thank you bro
Md. Kamruj jaman (3 months ago)
What to say except thnx? Is there any kinda similar word? Everyone's using that.
Peddinti Kartik (4 months ago)
will this work?? <right> <img src="lion.jpg"> </right>
tps3622 (6 months ago)
cool bro! Does this work in e-mail letters?
JavaScript Teacher (6 months ago)
CSS is limited in email messages. HTML tags like <center> will not work. And elements with position: absolute will not work in email. position: relative will work, width: 600px; will work. try to margin: 0 auto; within a "relative" element. There is no guarantee, but I don't see why CSS / margin centering shouldn't work in emails. Each email provider (gmail, yahoo, msn, etc) limits CSS in their own way (so you don't mess up the HTML of the inbox design itself.) You can try to copy and paste HTML directly into inbox message, send it to yourself and see if it works.
Callmehurt (6 months ago)
helped me
crypto currbit (7 months ago)
thanks meng
Amazing Guys (7 months ago)
Thank U
JavaScript Teacher (1 month ago)
Hey guys, my book CSS Visual Dictionary – https://www.amazon.com/dp/1983065633 Explains all of this and more with 150+ visual diagrams.
Mateus A Bernardo (7 months ago)
thanks man finally it worked, i was trying to use align and center both didnt worked, but this was fine
JavaScript Teacher (7 months ago)
Here's another tutorial about CSS box model https://medium.com/@js_tut/css-tutorial-1-box-model-6ff80a9bbfda
Mateus A Bernardo (7 months ago)
thank you, now i understand
JavaScript Teacher (7 months ago)
<center> is deprecated in modern browsers. It's from the 90's. Standard way of centering elements is via CSS. There's no such thing as "align." Only "vertical-align", "text-align", and "align-content". Automatic margin works only on elements whose "display" property is set to "block." Margins cannot be added to "text" (or in other words "inline" or "inline-block" elements.) This is a good book that explains all of this in detail: https://amzn.to/2I7Cb3F
JavaScript Teacher (7 months ago)
Define "doesn't work."
Mateus A Bernardo (7 months ago)
i dont understand why align doesnt work
iiApe (7 months ago)
Can you use it for margin-top auto?
JavaScript Teacher (7 months ago)
You can but... it's not going to work. In HTML height is usually unknown. So it cannot automatically align an element vertically. Only horizontally. However... you can achieve that by using "CSS grid". It's a bit more complex, and you may have to look it up on Google, but it has a CSS property "align-items: center" that will help you center an image vertically. Alternatively, you can also look into "object-fit" property. And lastly... it *is* possibly to make margin-top align an object to center vertically....provided that you know exact height of the container element. (example: <div style = "height: 400px"> and if your image is let's say <img style = "height: 100px">... then all you have to do is this simple calculation: container_height/2 MINUS image_height/2. In this case: 400/2 - 100/2 = 200 + 50 = 250. So... now, if you set margin-top: 250px, it will appear centered.
GeeLoLAct (9 months ago)
Precious
Brian (10 months ago)
TIME FOR A NEW MICROPHONE!!
Alaaeldin1993 (10 months ago)
if u r lazy <img src = "a.jpg"style = "display:block; margin-left:auto; margin- right:auto; " width= "250" height = "200"/>
JavaScript Teacher (8 months ago)
You can consolidate into 1 margin property: "margin: 0 auto 0 auto;" Order is (Top Left Bottom Right) when specifying all margins using one property "margin".
Radu Anastasiei (1 year ago)
THANK YOU
JavaScript Teacher (1 year ago)
That's sooo cool. That's why I make these videos, so it helps someone out there.
Radu Anastasiei (1 year ago)
Like dude my page looks much better now
JavaScript Teacher (1 year ago)
You're welcome (:
anna benson (1 year ago)
kudos to you guy really appreciate this
JavaScript Teacher (8 months ago)
Awesome! Glad it helped.
KBGGsRAIDER (1 year ago)
Thanks alot man it helped me alot everybody leave a like💪👍👍👍👍👍🖒🖒🖒🖒
Aeswa Productions (1 year ago)
thank you
Ayush Ahuja (1 year ago)
thnks a lot bro... saved my life :)
JavaScript Teacher (7 months ago)
I hope I save more lives. Like Jesus.
Ayush Ahuja (1 year ago)
thnks once again :)
JavaScript Teacher (1 year ago)
Hey good to know it's helping someone. Been a while since I made this one :)
NkTheGamer (1 year ago)
Thank you mate the first one worked for me :) have a good day
Whom ever didn't like the video is a hater
Pierre Odendaal (2 months ago)
Natural bodybuilder & reefer Either that, or neither works(Hint: that's me)
S. L Watkins (1 year ago)
Racist Pig. Lol. Statistic's show that White on white crime is higher in the US, quit it with the Cognitive Dissonance.
Nicholas Friedrich (1 year ago)
Thanks Dev! Your a difference maker!
Hardbass Approver (1 year ago)
WHO DARED TO PRESS THE DISLIKE BUTTON
Pierre Odendaal (2 months ago)
Hardbass Approver I did. Because neither works.
Benjamin Eng Hao Harn (5 months ago)
its cuz of his mic lol
JavaScript Teacher (1 year ago)
Haha. Must be the usage of dinosauric <center> tag!
Gabriel (1 year ago)
THANK YOU SO MUCH BRUH. REALLY USEFUL
JavaScript Teacher (1 year ago)
I don't know when, but at some point this video got indexed in Google for "how to center image in html". Since then, I think it's like a traffic portal opened! But it's fun(ny) to see that you both came from FFC.
Cameron Chardukian (1 year ago)
I'm also here from FCC. Best of luck with the projects brother!
Gabriel (1 year ago)
Dev Tigris ouhh ok bruh, cool
JavaScript Teacher (1 year ago)
+Gabriel Well, you know like iPage, and Wix. These are the "site builder" tools that let you make your own website by just clicking around. As a web designer myself I don't say I recommend them, just curious. I always wonder about why people are looking for my tutorials online.
Gabriel (1 year ago)
Dev Tigris I'm was doing a little project for freecodecamp. What are site builders?
fabian amonge (2 years ago)
i wanted to know how to make it in the center and enlarging it after clicking the image with background colors
Just me (2 years ago)
Thanks, helped me out! :)
JavaScript Teacher (2 years ago)
Ah, good. Glad it helped:)
ProbablyPublic (2 years ago)
Thank you very much.
JavaScript Teacher (2 years ago)
You're welcome!
Chirag Agarwal (2 years ago)
thank you so so so much! it was really helpful.thanks for making such videos!
JavaScript Teacher (2 years ago)
You're welcome:) Thanks for watching!
Stanley Yen (2 years ago)
Very helpful, thanks.
JavaScript Teacher (2 years ago)
Thank you:)
Basharat Bhikhiyana (2 years ago)
Thank you very Much and u have a Like from Me
Tigris Games (2 years ago)
+Basharat Bhikhiyana Thanks;)
Bata Radović (3 years ago)
I did what you told me and it isn't working. The pic is a gif and I used external css. Added style to a pic through a <div style=example.gif>. But the pic is still stuck to the left :C
JavaScript Teacher (3 years ago)
+Nie Jasam Try <img src = "example.gif" /> To center the image, you can try: <img src = "example.gif" style = "display:block; margin: 0 auto;"> By default the image's style is: display:inline. This is why it's sticking to the left side. It must be changed to block: <img style = "display:block;"> In your comment you have typed <div style = "...">, but images are usually added using <img> tag. It is possible to add an image into a <div> using style attribute, as a background. But you have to use CSS property "background" and "url(...)" For example: <div style = "background: url(example.gif); width: 100px; height: 100px;"></div> Note that <div> must close with a </div> And the arbitrary width and height determine the dimensions of the div. If it is bigger than the image, the background will tile (repeat itself). But for just adding image elements, use one self-closing ing tag like: <img src = "example.gif"/> tag.

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.