I have 3 frames..Top,left and right and an image to be put into top frame.How do I align it to the center of the webpage? | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
- 1

I have 3 frames..Top,left and right and an image to be put into top frame.How do I align it to the center of the webpage?

I tried using: align="middle" and align="center" but it didn't work.

11th Jan 2018, 3:53 PM
Purnima
Purnima - avatar
9 Answers
+ 1
thanks for the concern👍 Got it✌️
11th Jan 2018, 5:01 PM
Purnima
Purnima - avatar
0
to center directly in the middle of the page... position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
11th Jan 2018, 4:46 PM
Nope
Nope - avatar
0
what is the translate function used for?
11th Jan 2018, 4:48 PM
Purnima
Purnima - avatar
0
okay...I wanted the image on top of the page...And not exact center of the page... so..If we put that translate fucntion it will work rite?
11th Jan 2018, 4:54 PM
Purnima
Purnima - avatar
0
Ok so the origin of the image is the top left corner. so setting top and left to 50% will move the top left corner of the image to the middle of the page. then we use the translate property to move the image back, half the width and height of the image. think of translate kind of like being the width and height of your image. so 50%, 50% would be half the width and half the height. first number moves it left, second moves it up.
11th Jan 2018, 4:59 PM
Nope
Nope - avatar
- 1
finish your css course and you'll see 😉
11th Jan 2018, 4:49 PM
Nope
Nope - avatar
- 1
well...I wanted to know the solution in HTML tags..I found it though..The image tag can be placed In the <center></center> tags...Thanks anyway Brian G
11th Jan 2018, 4:52 PM
Purnima
Purnima - avatar
- 1
that will only center it left to right, not up and down.
11th Jan 2018, 4:53 PM
Nope
Nope - avatar
- 1
you're welcome
11th Jan 2018, 5:03 PM
Nope
Nope - avatar