Center absolutely positioned child element

Question

I need to horizontally center the child element of an inline block. The issue is that the child sub menu is variable width and can be wider than its parent. My initial solution was to set the child element a left & right of -50px but this is not really a variable width and instead statically sets it to be 100px wider than its parent.

.main-menu {
    text-align: left;
    margin: 0;
    padding: 0;
    font-size: 0px;
    font-size: 0rem;
}
.main-menu li {
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 1em;
    list-style-type: none;
    text-align: center;
    display: inline-block;
    zoom: 1;
    padding: 0 25px;
    position: relative;
}
li > a {
    display: inline-block;
    zoom: 1;
    padding: 21px 0 19px;
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    color: #282828;
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.2em;
    text-decoration: none;
    -webkit-transition: all .25s ease-in-out, background-image 0s, background-position 0s;
    transition: all .25s ease-in-out, background-image 0s, background-position 0s;
}
.sub-menu {
    position: absolute;
    top: 100%;
    left: -50px;
    right: -50px;
    max-width: 250px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    min-width: 150px;
    background-color: white;
    text-align: left;
    padding: 17px 0;
    box-shadow: 0 2px 5px #dcdcdc inset;
    border-top: 18px solid #ffdd00;
  }

<ul class="main-menu clearfix"><li id="menu-item-657" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children first menu-item-657">
<li id="menu-item-657" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children first menu-item-657"><a href="link">Solutions</a>
<ul class="sub-menu">
 <li id="menu-item-220469" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-220469"><a href="link">Solutions</a></li>
 <li id="menu-item-18009" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18009"><a href="link">How It Works</a></li>
 <li id="menu-item-10344" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10344"><a href="link">Why Use It</a></li>
 <li id="menu-item-3375" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3375"><a href="link">Products</a></li>
</ul>
</li>
 </ul>

`text-align: center` instead of `left` for `sub-menu` works for you? — kukkuz, Sep 12 '16 at 12:34

score 1 · Accepted Answer · answered Sep 12 '16 at 12:48

1

Here's what I usually do in this kind of situation:

.parent {
    /*....your existing css...*/
    position: relative;
}
.sub-menu {
    display: block;
    left: 50%;
    text-align: center;
    position: absolute;
    transform: translateX(-50%);
}

<div class="parent">
  <div class="sub-menu">
    Centered
  </div>
</div>

answered Sep 12 '16 at 12:48

Jonas Grumann

10,438
2
22
40

Awesome, worked a treat :) thanks ! – Daniel Benzie Sep 12 '16 at 14:50

score 0 · Answer 2 · answered Sep 12 '16 at 12:40

0

I ran into this problem last week and something like this fixed my issue:

li > a {
    ....your existing css...
    position: relative;
}
.sub-menu {
    display: block;
    left: 0;
    right: 0;
    text-align: center;
    position: absolute;
    margin-left: -100%;
    margin-right: -100%;
}

In my case, .sub-menu was wider than li > a, but I wanted .sub-menu to be centered underneath li > a. Is that the issue you're having?

answered Sep 12 '16 at 12:40

Ted Goas

7,051
1
35
42

Hey - thanks for taking the time to answer, yeah it is the problem I'm having but unfortunately the above wont work, this is because the bottom menu isn't really dynamic width but still based on its parent and with some of the smaller sub menus ends up too wide :( – Daniel Benzie Sep 12 '16 at 14:29

Center absolutely positioned child element

2 Answers2