I have been experimenting with CSS to keep an image consistently centered on a webpage. Now, I am looking to add 6 links on each side of the image while still keeping everything aligned in the middle as the page size changes.
I'm debating whether I should use three tables or just one table with a single row positioned centrally. It seems like utilizing a single table would be more straightforward, but I'm wondering if it's possible to have 6 rows in the first column, 1 row in the second column (dedicated to the main image), and another 6 rows in the third column. Once the table structure is established, my goal is to ensure that everything remains centered on the page.
Any advice or guidance on this matter would be incredibly helpful! Below is the code snippet that I currently employ to center the image:
IMG.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}