Click here to Skip to main content
15,879,613 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
First time poster here. Before you think this is yet another question asking how to do basic centering of something in a DIV, it's not.

Stack Overflow deep-6'd my question based off the word "center" without actually reading it. On the other hand, it's possible I did miss the question being answered somewhere and I wasn't searching with the right keywords.

Original Question:
Quick background - I am a graphic artist that's been tasked with this project, and don't have much experiencing coding. I've gotten to this point through Google-fu and Stack Overflow. I'm open to any solution within reason, so long as I can mostly understand it (lol). CSS, JS, jQuery, whatever. But now I'm stuck and, more worrisome, I'm afraid I've codded myself into a corner.

Problem - As you can see in the linked Fiddle, my tile based "menu" is functioning great EXCEPT that I cannot figure out how to center the tiles' menus (DIV with purple background) relative to the parent of the parent.

That is, I'm trying to make the DIV with class .tile-menu-container-open centered to the parent of it's parent, DIV .tile-collection .

What I have tried:

This is what I've been able to get thus far:

JS Fiddle

EDIT: You may have to manually press "run" after the page loads to trigger jQuery properly, for some reason.

Note: From what I can tell, I need to keep the menu container DIV where it is in the overall structure so as to maintain the position of the closed tiles, especially when the window resizes.

It sorta works, and resizing the window does make the menu container collapse to smaller sizes ... sorta.

Am I out of luck here?
Updated 11-Aug-22 14:23pm

1 solution

You're using jQuery, so my thoughts are as follows:
1. Get/read the width and position of the Parent container that you want to center in
2. Add a container div around the menu that you want to center (eg: menu-container)
3. Get the position of the Tile
4. transform translate (move/position) the menu-container to left side of the parent and set its width to the read width.
5. now center the menu within the parent (menu-container).
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900