始終垂直對齊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

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預處理器編織。