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

How to center an image in HTML

362 ratings | 69061 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 (94)
Nacaise Basford (13 days ago)
Aleyda DV (1 month ago)
you're a life saver! thank yo so much i was looking for this for 2 hours! -.-
Clashing Cave (1 month ago)
Thanks it really works
Ratnavel Makesan (1 month ago)
Ratnavel Makesan (1 month ago)
Chesco (2 months ago)
your fucking mic bro!
Jenit (3 months ago)
The center <center> tag is not outdated in 2019.
Abdifatah Ali (3 months ago)
You saved my life, thank you so much!
NIKHIL CHANDRA ROY (3 months ago)
Thanks but center tag has been disable for html5 by w3c, so we should use 1st step.
Jesse Ramoo (3 months ago)
Thanksss soooo muchhhhhhh😄😄
Kinan Aarfeh (3 months ago)
Thanke you💙
Andres Piñeiro (4 months ago)
Thanks! good vid :D
Fnex (4 months ago)
ushi youtube channel (5 months ago)
Thank your video helped me a lot
Flame Gupta (5 months ago)
Thx man..
ajay jethwa (7 months ago)
Thank YOU, simple to understand.
JavaScript Teacher (7 months 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 (7 months ago)
Classic tutorial! No mind bending graphics, no bullshit, straight to the content and it works!!! Great video. Thanks a lot!
14 Demon Jagger (7 months ago)
thank you, I been looking for a way to place the img there :D
JavaScript Teacher (7 months ago)
You're welcome.
Steven Duquette (7 months ago)
awesome, that worked
JavaScript Teacher (7 months ago)
Good to know.
Zenzeki (7 months ago)
doesn't work
SUBRAT SHAH (8 months ago)
none of them works
Joe Marie Pines (8 months 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 (8 months ago)
You might need to start looking into flex or css grid.
Pierre Odendaal (8 months ago)
None of them works
Jeremy Malies (9 months ago)
It worked for me. Excellent. Thank you.
TommyPKFire (9 months ago)
That could've been 5 minutes shorter lol
lingala bharath (10 months ago)
thank you bro
Md. Kamruj jaman (10 months ago)
What to say except thnx? Is there any kinda similar word? Everyone's using that.
Peddinti Kartik (11 months ago)
will this work?? <right> <img src="lion.jpg"> </right>
tps3622 (1 year ago)
cool bro! Does this work in e-mail letters?
JavaScript Teacher (1 year 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 (1 year ago)
helped me
crypto currbit (1 year ago)
thanks meng
Amazing Guys (1 year ago)
Thank U
JavaScript Teacher (7 months ago)
Hey guys, my book CSS Visual Dictionary – https://www.amazon.com/dp/1983065633 Explains all of this and more with 150+ visual diagrams.
maoop mkaisla (1 year ago)
thanks man finally it worked, i was trying to use align and center both didnt worked, but this was fine
JavaScript Teacher (1 year ago)
Here's another tutorial about CSS box model https://medium.com/@js_tut/css-tutorial-1-box-model-6ff80a9bbfda
maoop mkaisla (1 year ago)
thank you, now i understand
JavaScript Teacher (1 year 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 (1 year ago)
Define "doesn't work."
maoop mkaisla (1 year ago)
i dont understand why align doesnt work
iiApe (1 year ago)
Can you use it for margin-top auto?
JavaScript Teacher (1 year 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 (1 year ago)
Brian (1 year ago)
Alaaeldin1993 (1 year ago)
if u r lazy <img src = "a.jpg"style = "display:block; margin-left:auto; margin- right:auto; " width= "250" height = "200"/>
JavaScript Teacher (1 year 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)
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 (1 year 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 (1 year 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 (8 months ago)
Natural bodybuilder & reefer Either that, or neither works(Hint: that's me)
S. L Watkins (2 years 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 (2 years ago)
Thanks Dev! Your a difference maker!
C99 (2 years ago)
Pierre Odendaal (8 months ago)
Hardbass Approver I did. Because neither works.
Benjamin Eng Hao Harn (11 months ago)
its cuz of his mic lol
JavaScript Teacher (2 years ago)
Haha. Must be the usage of dinosauric <center> tag!
Gabriel (2 years ago)
JavaScript Teacher (2 years 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 (2 years ago)
I'm also here from FCC. Best of luck with the projects brother!
Gabriel (2 years ago)
Dev Tigris ouhh ok bruh, cool
JavaScript Teacher (2 years 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 (2 years 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 (3 years ago)
Thank you very Much and u have a Like from Me
Tigris Games (3 years ago)
+Basharat Bhikhiyana Thanks;)
Bata Batica (4 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 (4 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.