html - 始终在 DIV 内垂直对齐 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; }

我有两种类型的 DIV，一种是带有单个按钮的，另一种是带有两个按钮的。

是否可以始终垂直对齐它们，无论是单个按钮还是两个按钮？

这是我的链接 http://codepen.io/w3nta1/pen/wGxOzO

Answer 1

这是我的 JSfiddle，它可以帮助你。

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; }

已更新

Here 我已经更新了 .imageBox 的高度和宽度