CODEWITHSUNDEEP
cssdrop-down-menucenteringalignment
Robert F Wainblat III
Robert F Wainblat III

Reputation: 29

Center Parent Div around child div element (reverse inheritance?)

I'm struggling with centering a menu made of different sized divs for the following site: https://robert-wainblat.squarespace.com/ . The wrapper (parent div - ul.nav.clear) centers properly, as do the child divs (menu buttons) within the wrapper. My issue is that I don't want the buttons to be distributed equally around on a virtual center, I would like the HOME button to be the center and align it with the center of the logo beneath it, almost like a pivot, and have the other buttons align around it:

 __________________________________________
|      1  2  3  4  HOME  5  6  7  8        |     
 ------------------------------------------

Is this even possible? The only other option I can think of is to hard code the top 10 resolution widths and adjust for margin-left to make the HOME button appear centered.

Here's the CSS for the menu right now:

.primary-nav .nav {
  /*this is the parent div;*/
  width: 100%;
  position: relative;
  margin-left: 5.34%; - CURRENTLY USING THIS TO TWEAK POSITION FOR CURRENT RESOLUTION
  padding: 0;
  text-align: center;
  background-color: rgba(19, 19, 19, 0.9);
  z-index: 1001;
  background-attachment: scroll;
  list-style-type: none;
}

All help will be immensely appreciated!

Thanks!

Upvotes: 0

Views: 462

Answers (1)

David Millar
David Millar

Reputation: 1878

The only way that currently comes to mind is to separate the two sides into individual containers, right-align the left side, left-align the right side, and add enough padding to the containers to leave a gap for an absolutely-positioned HOME.

#menuLeft {
    width:50%;
    text-align:right;
    padding-right:75px;
    box-sizing:border-box;
}

#menuRight {
    width:50%;
    text-align:left;
    padding-left:75px;
    box-sizing:border-box;
}

#menuHome {
    position:absolute;
    left:50%;
    margin-left:-75px;
    width:150px;
    text-align:center;
}

Upvotes: 0

Related Questions