How do i center an img?

How do i center an img?
0

#1

Can any tell me how i center an img in html or css only, no bootstrap or jquery etc.
Thanks.


#2

You can center any block element by setting its margins for each side to auto, like this:

img {
  display: block;
  margin: 0 auto;
}

If you’re not familiar with the shorthand form, it’s the same as:

margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

#3

Try this
img {
display: block;
width: 100%;
margin: auto;
}
Change the image into block element.
You have to set “width” or this won’t work. I used 100%, but you can choose the percentage that fits you. Hope this helps


#4

Oh, and I almost forgot about the flexbox solution. All you need to do is to add the following to the image’s parent:

  display: flex
  justify-content: center

#5

I still cant get it to work, I’m onto the Tribute page now and its like i have brain freeze and can’t remember anything haha.


#6

Well, it’s pretty hard to help without seeing what you’ve got so far :slight_smile:


#7

Ah yes that would help haha. Ill link now, ive just started with a h1, h2, img. http://codepen.io/LeeForeignoy/pen/LRoXYR


#8

First of all, you don’t have to use html and body tags on CodePen, you can start with the div. I’ve also noticed that you added the Bootstrap CSS. Do you want to use Bootstrap for the tribute page? If you want to, you can simply add center-block class to your image, this class uses the same display: block; margin: auto solution.

If you don’t want to use Bootstrap, you can add these lines to your CSS tab on Codepen:

img {
  display: block;
  margin: 0 auto;
}

#9

Thanks so much. No i dont want to use bootstrap, i just added that at first when viewing the video along with the rules of the Tribute page challenge. I just forgot about adding it. And yes i was not sure about the html and body tags so i just put them in anyway as there was no error when doing so. I did actually add that img { display: block; margin: auto; } before, it was the first thing i did but it didnt work obviously due to an error on my part. From then on though i was trying all sorts of things for hours and just got more and more confussed haha!


#10

Oh, I see. I’ve just checked your pen again and it seems you already added the CSS. If it still doesn’t work for you, try to click on Tidy CSS in the CSS dropdown. :wink:


#11

Its still not working for me. I should add that i am coding on my tablet at the moment and theres no drop down i can see for tidy. I am wondering if its an issue related to using a tablet?


#12

Here’s one way I used to center the image using flexbox. In summary you have container, and then you tell it how you want the children inside to align. Here’s a link to a more in-depth look at flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

And here’s a codepen to it implemented. In this exampled the image is centered horizontally and vertically. http://codepen.io/iRoachie/pen/eBOryJ


#13

@LeeForeignoy how are you going with this? I just checked the Pen you linked to and saw that you haven’t used the code snippet @zsoltime shared. I just tried it and it works fine. Using a tablet shouldn’t make any difference - this is very standard, no-frills CSS that should run on literally anything you can browse the internet on.


#14

@iRoachie @JacksonBates to the both of you, thanks for trying to help me with this but its still not working. I looked at your pen link and yes the image is centered on my tablet, i then open my pen and entered the code as it you wrote it but its not centering. Ill link you to my pen and ill take screen shots.


#15


Also what is the best way for me to link screen shots?


#16

You can just paste images into the text window and they will upload.

Here is a simple fork of your pen that works, using the method above: http://codepen.io/Malgalin/pen/GNKwaM?editors=1100


#17

`


#18

You have an opened h1 tag in your css.

You have:

h1 {
 
  .center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

It should be:

  .center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

#19

Thats so weird, this is what I’m talking about, thats wasn’t there before but i opened my codepen now and yes that h1 was there as you showed me, i just deleted it, saved and run the code but its still not working, somthing really strange is going on.


#20

Now you have an opened div tag. You have to close your tags mate. In CSS you have to close the bracket at the end of your declaration. Your div tag is open.

div {
  display: block;
 
  .center {
    display: flex;
    justify-content: center;
    align-items: center;
  }