如何垂直的中心随机高度的图像轮盘

Question

我试图添加垂直居中这是对http://jsfiddle.net/ev2wD/2/的标志在我的jQuery旋转木马http://apple.mdsc1.com/slick-1.6.0/ourpartners.html

怎么做呢？我的标志的容器是： -

<section class="regular slider"> 
<div> 
    <a href="http://www.mobileiron.com" target="_blank"><img src="images/mobileiron.jpg" alt="" /></a> 
</div> 
<div> 
    <a href="http://www.vmware.com/products/enterprise-mobility-management.html" target="_blank"><img src="images/airwatch.jpg" alt="" /></a> 
</div> 
<div> 
    <a href="http://www.sap.com" target="_blank"><img src="images/sap.jpg" alt="" /></a> 
</div> 
<div> 
    <a href="https://www.jamf.com/products/jamf-pro/" target="_blank"><img src="images/jamf.jpg" alt="" /></a> 
</div> 
<div> 
    <a href="https://products.office.com/en-us/home" target="_blank"><img src="images/ms.jpg" alt="" /></a> 
</div> 
<div> 
    <a href="http://www.cisco.com/c/m/en_us/solutions/strategic-partners/apple.html" target="_blank"><img src="images/cisco.jpg" alt="" /></a> 
</div> 

Answer 1

display: flex; 
align-items: center; 

将它添加到您的.slick-track类。适合我。

Answer 2

我想你真正想要做的是将类分配给每个图像，然后垂直对齐它们：

img.<your_clss_name> { 
    vertical-align: middle; 
} 

这将通过垂直的中间点对齐的所有图像。

Answer 3

.home-container-img { 
 
    height: 50px; 
 
    max-height: 50px; 
 
    text-align: center; /* align the inline(-block) elements horizontally */ 
 
    font: 0/0 a; 
 
} 
 

 

 

 
.home-img img { 
 
    height: 50px; 
 
    margin: 0 auto; 
 
    padding-top: 10px; 
 
    display: inline-block; 
 
    vertical-align: middle; /* vertical alignment of the inline element */ 
 
    font: 16px/1 Arial sans-serif; /* <-- reset the font property */ 
 
}

<div style="height:70px; width:100px; border:1px solid black; "> 
 

 
<div class="home-container-img"> 
 
      <div class="home-img img"> 
 
       <img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" /> 
 
      </div> 
 
     </div> 
 
     
 
     </div>

就像这样：