clement clement - 7 months ago 12
HTML Question

Always vertical align DIV inside DIV

<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

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

Comments