Aligning images in HTML

Development Web Development
1

So Im playing around with HTML and CSS (I can do all the hard languages like Java or Python or C++ but anything.. GUI has always escaped me).

So im trying to align an image with css using:

middle-img

position:absolute;
top:50%; left:50%;

but this aligns using the corner of the image, not the middle, resulting in the image actually not being in the middle.

I want the image to be dead center relative to its own center. Any help?

Also: Jesus I hate anything with graphics.

4

use css a lot for aligning elements to center, horizontally only
classic method is:

margin-left: auto;
margin-right: auto;

i usually use a shorthand version that works too

margin: 0 auto;

can also use something like:
margin: 10px 0 auto;

10px is for top and bottom margin size, 0 for left and right margins

As you are using absolute positioning, I presume vertical alignment may not be essential. In case you do, there are some suggestions here: https://www.w3.org/Style/Examples/007/center I haven't had a situation to use the vertical alignment suggestions yet, so can't confirm if this is any good

5

When dealing with absolute, alignment is handled by the top, left, right, bottom properties. So if you want to put your image in the dead center you can do the following:

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

Hope this helps.

6

Problem with that is that it doesn't work on most default mobile webbrowsers....

7

The way that I have done it easily enough is something like

Got the job done for me.

EDIT: The site kept giving me issue with the line of code, so I just capped it and posted for simplicity.

8

This quote made my day

1 Like
9


img {
display: block; /* may help get rid of some spacing around image - inside A tags etc */
margin: 0 auto;
border: 0; /* if you have it inside A - some browsers will throw blue border around it, unless you have it reseted somewhere before */
}

and who typed that CENTER tag, please dont! thats long way into history! - ok unless you do newsletters, thats different story :D

if you need vertical align, some browsers can do "margin: auto auto;" but dont really try that, try flexbox or absolute positioning (add "position:relative" to element where you want absolute position being calculated from)

1 Like
10

cuz its not valid, CENTER tag is long time dead :P

11

lol worked last time I used it.

12

The browsers will still accept it, but they don't need to as it isn't part of the HTML spec anymore. The goal with HTML5 was to keep it strictly page structure and content while leaving all design elements to CSS. This means no more tags.

13

Since people have spoken about the <center> tag I just thought I'd clarify why it's not used anymore.
It is true that browsers will still understand it, but HTML5 will throw an error, the center tag was taken out of HTML5 since now a days we can use CSS to accomplish what that tag used to do.

All the <center> tag does is align text center, images will also listen to this so if you need to align an image center you would write this in your CSS:

img {
    text-align: center;
}

Note: this will center align all images on your site, restrict it by wrapping the image in a div or something and apply the above only to that div. So "img {" would instead be "#your-div img {"

1 Like
14

Nailed it!