How do I set the image to center on a web page? They way I make it is not working


#1

<body>
	    <img src="http://cdn.bulbagarden.net/upload/thumb/3/3e/039Jigglypuff.png/250px-039Jigglypuff.png" align="middle" />
</body>

#2

align center, that would be easy. I would personally use this method:

<img src="http://cdn.bulbagarden.net/upload/thumb/3/3e/039Jigglypuff.png/250px-039Jigglypuff.png" style="display: block; margin: 0 auto" />

but i am sure there is a more effective way. I make the image a block, then i center it by adding equal amount of margin on each side (margin auto)


#3

That works! Is there a w3school page on what your method was?


#4

i don't like w3schools, MDN is better. here is the page about display, and here about margin.

Also, i recommend to read this quora question


#5

I haven't gotten to css yet looks like alot to take in but thanks for the suggestion I did not know about MDN, it seems alot more easier to follow then w3schools!


#6

but the property's + values (margin, display) you use in css, you can use in the style attribute as well.

No, MDN is more difficult to follow. But it does always suggest best practice (since everyone can make suggestion to a pages), unlike w3schools, you can read about this in the quora question i linked to


#7

@scriptrunner40588,

That's a really cool method. I have a problem with getting images to actually display.
Where can I get images without security issues that can display when I reference them?


#8

Most images should work, there are very few sites who actually block you from using there images


#9

@stetim94,

I've tried using some but it doesn't bring up the image, just shows the jpg icon but no image, do you have any link that has worked for you that I can try out?
Thanks


#10

Have you tried scriptrunner40588 his image? It seem to work fine, maybe share with us your code of a image that doesn't work?


#11

Here are some of the codes I've tried using

http://www.freedigitalphotos.net/images/blue-bearded-bee-eater-nyctyornis-athertoni-photo-p366076

https://www.google.com/imgres?imgurl=http://curiositysip.com/wp-content/uploads/2015/08/Birds-19.jpg&imgrefurl=http://curiositysip.com/birds/&h=1200&w=1600&tbnid=BVaic9otjiDyKM:&docid=ldAGFRPdRUPEWM&ei=ZOaPVsyyF4e1UdLkrpAL&tbm=isch&ved=0ahUKEwjM9ITq05rKAhWHWhQKHVKyC7IQMwg1KAMwAw


#12

You need to copy the image location:

http://91ef69bade70f992a001-b6054e05bb416c4c4b6f3b0ef3e0f71d.r93.cf3.rackcdn.com/blue-bearded-bee-eater-nyctyornis-athertoni-100366076.jpg

(right click image, and select copy image location/source/url. Not the webpage url


#13

Thanks a lot, really appreciate.