0

I am a beginner and trying to to my own wordpress theme from scratch (using bootstrap, stripping away everything and adding my own). Now I have got stuck on an annoying problem.

I have a div containing 3 smaller divs which gonna be menu-items as images. I have gotten the 3 to be horizontally centered in comparison to the outer div but not vertically.

I have set the inner divs to be as high as the outer but im not able to get the inner contents to also be vertically centered.

This is my code: HTML

#menu {
  margin: 0 auto;
  width: 60%;
  height: 300px;
}

div.menu_item {
  display: inline-block;
  height: 100%;
}

div.menu_item img {
  -webkit-border-radius: 15px;
  border: 1px solid #CCC;
  border-radius: 15px;
  clear: both;
  height: 150px;
  margin: 4px 15px;
  padding: 10px;
  width: 150px;
}
<div id="menu">
  <div class="menu_item">
    <p>
      <a title="" href="myimg"><img alt="" src="/myimg.png" width="125" height="125" /></a>
    </p>
  </div>
  <div class="menu_item">
    <p>
      <a title="" href="myimg"><img alt="" src="/myimg.png" width="125" height="125" </a></p>
  </div>
  <div class="menu_item">
    <p>
      <a title="" href="myimg"><img alt="" src="/myimg.png" width="125" height="125" </a></p>
  </div>
</div>

Im aware of that this might be very messy and almost certain some things arent needed and could be stripped away but I have tried to figure it out for myself and this is what Ive came to this far.

Screenshots of it is here: outer div outer div

one of the inner divs one of the inner divs

The first shows the outer div, the second shows one of the inner divs.

UPDATE: Solution was fiddling around with flexbox and it was quite easy even for me. Also, I tried to strip away as much as I could from the CSS and still have the same result and apparently almost no code is required.

This is my CSS now

 #menu
{
    margin:0 auto;
    width:60%;
    height:300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

This makes the content of #menu to be centered both vertically and horizontally.

emcolsson
  • 19
  • 1
  • 7

1 Answers1

0

This should work:

div.menu_item
{
    width: X%; /*change to display: table; if you're targeting IE8 or greater, requires !DOCTYPE */
    margin: 0 auto;
    ...
}

The width just must be less than the outer div, I put X to represent the percentage.

The same can be done with height:

...
height: X%;
...
Juan T
  • 1,219
  • 1
  • 10
  • 21