How to align images to center?

html images

21st Dec 2016, 9:18 AM

Jayani Ranathunga

13 Answers

+ 4

10th Feb 2017, 1:22 PM

Valen.H. ~

+ 3

With css, certainly... But we need more information of your context to help you, because there are many solution possible according to it ^^ You could try to center the text of the container of your image ( if it's img tag element ), or use the margin property set with the "auto" value, as you can place it in a table-cell for control of the vertical alignment...

21st Dec 2016, 9:59 AM

visph

+ 2

@James Durand: Yes, flexbox is another solution : I don't have this reflex, because I nerver get the time to dive in it... Maybe a day Oo ( I recently discover GUI's framework like tkinter for python, or android logic : I wonder if Flexbox is a kind of this sort of flow content managment, so I already started to acquire the comprehension of these logic and concept )

21st Dec 2016, 10:31 AM

visph

+ 1

For everyone suggesting the use of the align attribute on the img tag, this is a really bad idea. That attribute was deprecated way back in HTML 4 and marked obsolete in HTML 5. This means browsers no longer need to support it. You should ONLY be doing styling and layout via CSS, not HTML tags.

2nd Jan 2017, 12:41 PM

James Durand

+ 1

@Megamind: Read the answers before posting: @James Durand already said that 'align' attribute of <img> tag is deprecated since Html4 and obsolete with Html5 ^^

10th Feb 2017, 1:09 PM

visph

+ 1

@Benj: Less verbose, same result: <html> <head> <title>Page Title</title> <style> body { margin: 0; text-align: center; } #i { border: none; border-radius: 50%; width: 60px; height: 60px; } </style> </head> <body> <h4>|</h4> <img src="https://www.sololearn.com/Icons/Courses/1024.png" id="i"/> </body> </html> ... But mostly, this is a very specific answer ;P

10th Feb 2017, 5:34 PM

visph

Flexbox is also a great option if you're targeting more modern browsers.

21st Dec 2016, 10:11 AM

James Durand

display: flex////////////// justify-content: center/////////////////// align-items: center

5th Nov 2018, 2:30 PM

Виталий Игнатенко