始終使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; }

更新

在這里，我更新了.imageBox的高度和寬度

Answer 2

編織： http : //kodeweave.sourceforge.net/editor/#9711efdfbb1bae01637fbd39d75ce11a

這是一個簡單的修復。

設置.imageBox以display: table; 然后將.imageActions設置為display: table-cell;

由於.imageActions現在顯示為table-cell您可以使用vertical-align: middle; 在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> 

我在平板電腦上，這就是為什么我使用kodeWeave的原因，因此為什么我使用Jade和Stylus預處理程序保存了編織。