始终垂直对齐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预处理器编织。