Lab 4 - Centering
In this lab, you will work on centering content on a webpage.
Categories:
less than a minute
1. Center an element horizontally
- Make a page with only 1 element inside body: main
- put 1 element only inside main: img
- use a square image (perhaps from https://picsum.photos or if you’re ready for the challenge, add some image of your own/ stolen from the web and test your ability to publish this code to github pages), restricted to 10rem in size
- without using flexbox or css-grid, write CSS rules to center the image horizontally in the page
2. Center an element vertically
- Duplicate the directory containing your code for the previous part (we’d like to keep it as a reference/example)
- update the style rules to also center the img vertically (you may use flexbox for this part)
Last modified August 11, 2024: moved a bunch of things for archival purposes (6652bbe)