0

How to align images to center?

21st Dec 2016, 9:18 AM
Jayani Ranathunga
Jayani Ranathunga - avatar
13 odpowiedzi
+ 4
<center>
10th Feb 2017, 1:22 PM
Valen.H. ~
Valen.H. ~ - avatar
+ 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
visph - avatar
+ 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
visph - avatar
+ 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
James Durand - avatar
+ 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
visph - avatar
+ 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
visph - avatar
0
Flexbox is also a great option if you're targeting more modern browsers.
21st Dec 2016, 10:11 AM
James Durand
James Durand - avatar
0
display: flex////////////// justify-content: center/////////////////// align-items: center
5th Nov 2018, 2:30 PM
Виталий Игнатенко
Виталий Игнатенко - avatar
- 4
<align></align>
26th Dec 2016, 5:48 AM
Md Forhad Hosen
Md Forhad Hosen - avatar
- 4
For example <img src="c:\collonspc\images\she.jpg" align="center"/>
27th Dec 2016, 7:42 AM
Jyte
Jyte - avatar
- 4
<img src="#" align="center" height="500px" >
1st Jan 2017, 8:29 AM
Manan Atal
Manan Atal - avatar
- 4
you can align centre or left by attribute command align= center or left
2nd Jan 2017, 5:03 AM
Rohit Sharma
Rohit Sharma - avatar
- 4
<font text-align="center" </font>
2nd Feb 2017, 3:59 PM
Md Forhad Hosen
Md Forhad Hosen - avatar