CODEWITHSUNDEEP
htmlcsswordpress
user3550879
user3550879

Reputation: 3469

centering the div that's centered in a div

the .menu div is centered (the left side of it is) I want it to center based on its width, but I cannot set it's width since it's based on Wordpress links. Same with height, I would like it exactly centered height/width.

css

.menu {
 position: absolute;
 left: 50%; top: 50%;
 background: #fff;
}

.nav-wrapper {
 position: relative;  
 height: 100%;
 width: 100%;
 }
.overlay{
 position: fixed;
 display: none;
 z-index: 50;
 top: 0; left: 0;
 height: 100%; width: 100%;
 background: rgba(0, 0, 0, 0.85);
 overflow: auto;
}

html

<div class="overlay">
  <div class="nav-wrapper">
    <nav class="menu">
        <?php wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) ); ?>
    </nav>
  </div>   
</div>

Upvotes: 0

Views: 44

Answers (3)

Hybrid
Hybrid

Reputation: 7049

You could restructure your CSS so that the nav-wrapper is positioned absolutely, and use the text-align:center trick to center the block as such:

.menu {
 display:inline-block;
 background: #fff;
}

.nav-wrapper {
 position: absolute;  
 width: 100%;
 text-align:center;
 top:50%;
 transform: translateY(-50%);
 }
.overlay{
 position: fixed;
 display: none;
 z-index: 50;
 top: 0; left: 0;
 height: 100%; width: 100%;
 background: rgba(0, 0, 0, 0.85);
 overflow: auto;
 transform-style: preserve-3d;
}

JSFiddle (display:none disabled): https://jsfiddle.net/Hybridx24/1u0fd3nn/

Upvotes: 0

agdhruv
agdhruv

Reputation: 640

You could center an absolutely positioned div by doing the following:

.menu{
position : absolute;
left : 0px:
right : 0px;
margin : 0px auto;
}

Of course, you could also use JavaScript for the same. What I gave is a CSS only method.

Upvotes: 1

irot
irot

Reputation: 592

Because you can't/don't know the final width of the .menu element, the only way I can think of that lets you use the position: absolute with top: 50%; left:50% is if you calculate the element's width on page load and add the margins accordingly. e.g.

$('.menu').css('marginLeft', $('.menu').width() * -0.5);

Alternatively, you can keep your HTML and try the styles below, though I'm not sure where you need it aligned to vertically.

.menu {
  // remove the absolute positioning and top/left
  display: inline-block;
  vertical-align: middle;
  background: #ffffff;
  text-align: left; // assuming you want its contents left aligned
}

.nav-wrapper {
  position: relative;  
  height: 100%;
  width: 100%;
  text-align: center;
}

Upvotes: 0

Related Questions