How to place a image center | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 1

How to place a image center

I try to centering a image but it dont i am using html and css

22nd Jul 2020, 8:03 PM
Karula Korona
Karula Korona - avatar
9 Answers
+ 4
Can you share your code? If you're trying to center it both vertically and horizontally then: img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } only vertical: img { position: absolute; left: 50%; transform: translate(-50%); } only horizontal: img { position: absolute; top: 50%; transform: translate(0, -50%); }
22nd Jul 2020, 8:21 PM
Bagon
Bagon - avatar
+ 1
<img> is an inline element, therefore, you should place it inside a paragraph aligned to the center if you want the picture to be aligned to the center, like this: <p align="center"> <img src="example"> </p> You can of course do that with CSS as well.
22nd Jul 2020, 11:42 PM
Karak10
Karak10 - avatar
+ 1
Art Bucket no, that's wrong.
23rd Jul 2020, 4:38 PM
Karak10
Karak10 - avatar
0
img { display: block; margin: auto; }
22nd Jul 2020, 8:24 PM
Никита
Никита - avatar
0
Please link your attempt.
22nd Jul 2020, 9:30 PM
JaScript
JaScript - avatar
0
Use center tag to center an image.
23rd Jul 2020, 1:27 PM
shubham kumar
shubham kumar - avatar
0
use the <img align=center>
23rd Jul 2020, 4:28 PM
Art Bucket
0
thanks for showing my mistake
23rd Jul 2020, 4:41 PM
Art Bucket
0
Karula Korona hi, It seems there is an easy way to do that: On the container element--> .container{ display:grid; place-items:center; } I didn't test if it works on inline element, if no, you can try to add img{ display:inline-block; } The tips is given at 2mn in that video with others usefull ones after: https://youtu.be/qm0IfG1GyZU
24th Jul 2020, 11:28 AM
EmmanueLZ.
EmmanueLZ. - avatar