Always vertical align DIV inside DIV

Question

<ul>
   <li>
     <div class="imageBox">
       <div class="imageActions">
         <a href="#"><div class="box">link1</div></a>
       </div>
     </div>
  </li>

  <li>
    <div class="imageBox">
      <div class="imageActions">
        <a href="#"><div class="box">link1</div></a>
        <a href="#"><div class="box">link2</div></a>
      </div>
    </div>
  </li>
</ul>

CSS:

ul { list-style: none; }
li { width : 200px; }

.imageBox { 
    with:196px; 
    height:100px; 
    position:relative; 
    background:#000; 
    overflow: hidden; 
    margin-bottom:2px; 
}

.imageBox .box {  
    margin: 5px auto; 
    padding: 5px; 
    border:solid 1px #6f94e1; 
    background-color:#456fd3; 
    color:#FFF; 
    width:100px; 
    font-size:13px; 
    text-align:center; 
 } 


.imageBox .imageActions { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background:rgba(0,0,0,0.5); 
    display: none
  }

.imageBox:hover .imageActions { display: block; }

I've two types of DIV, one is with single button and another is with two buttons.

Is it possible to always vertical align them, either single or two buttons?

Here's my link http://codepen.io/w3nta1/pen/wGxOzO

Answer 1

Here my JSfiddle which can help you.

HTML

<ul>
 <li>
   <div class="imageBox">
   <div class="imageActions">
   <a href="#"><div class="box">link1</div></a>
  </div>
 </div>
</li>

<li>
 <div class="imageBox">
  <div class="imageActions">
   <a href="#"><div class="box">link1</div></a>
   <a href="#"><div class="box">link2</div></a>
  </div>
 </div>
</li>
</ul>

CSS

ul { list-style: none; }
li { width : 200px; }
.imageBox {display: table;height:120px;width:120px}
.imageActions {display:table-cell;height:120px;vertical-align:middle}
.imageBox { with:196px; height:100px; position:relative; background:#000; overflow: hidden; margin-bottom:2px; }

.imageBox .box {  margin: 5px auto; padding: 5px; border:solid 1px #6f94e1; background-color:#456fd3; color:#FFF; width:100px; font-size:13px; text-align:center; } 


.imageBox .imageActions { width:100%; height:100%; background:rgba(0,0,0,0.5); opacity: 0;}
.imageBox:hover .imageActions { opacity: 1; }

UPDATED

Here I have updated the height and width of .imageBox

Answer 2

Weave: http://kodeweave.sourceforge.net/editor/#9711efdfbb1bae01637fbd39d75ce11a

This is an easy fix.

Set .imageBox to have a display: table; Then set .imageActions to have a display: table-cell;

Because .imageActions is displayed as a table-cell now you can use vertical-align: middle; to center your anchors vertically in the div.

 ul { list-style: none; } li { width: 200px; } .imageBox { display: table; width: 196px; height: 100px; position: relative; background: #000; overflow: hidden; margin-bottom: 2px; } .imageBox .box { margin: 5px auto; padding: 5px; border: solid 1px #6f94e1; background-color: #456fd3; color: #FFF; width: 100px; font-size: 13px; text-align: center; } .imageBox .imageActions { border-top-color: #000; background: rgba(0, 0, 0, 0.5); display: none; } .imageBox:hover .imageActions { display: table-cell; vertical-align: middle; } 

 <ul> <li> <div class="imageBox"> <div class="imageActions"> <a href="#"> <div class="box">link1</div> </a> </div> </div> </li> <li> <div class="imageBox"> <div class="imageActions"> <a href="#"> <div class="box">link1</div> </a> <a href="#"> <div class="box">link2</div> </a> </div> </div> </li> </ul> 

I'm on a tablet which is why I'm using kodeWeave and thus why I saved the weave utilizing Jade and Stylus preprocessors.