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>

就像这样：

如何在旋转木马中垂直居中随机高度的图像

3 个答案: