始终在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

的高度和宽度

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预处理器保存编织的原因。