顯示圖像>李

Question

我有這樣的CSS：

.clients { 
    list-style: none; 
    margin-bottom: 16px;  
} 

.clients li { 
    display: block; 
    padding: 15px 0px; 
    background: #f4f4f4; 
    border-bottom: 1px solid #ccc; 
    margin-bottom: 24px; 
    min-height:100px; 
    max-height:100px; 

    -webkit-transition: all .2s linear; 
    -moz-transition: all .2s linear; 
    -o-transition: all .2s linear; 
    -ms-transition: all .2s linear; 
    transition: all .2s linear; 
} 

這個HTML：

<ul class="clients"> 
    <li><img src="" /></li> 
    <li><img src="" /></li> 
    <li><img src="" /></li> 
</ul> 

我想使圖像在clients或在底部顯示水平居中，因爲圖像可能有不同的尺寸

Answer 1

這樣的事情？

得到在同一水平線上的圖像使用在li CSS

display: inline-block; 

以下，以獲得圖像的中心，請使用ul CSS

text-align:center; 

.clients { 
 
    list-style: none; 
 
    margin-bottom: 16px; 
 
    text-align:center; /* ADD THIS */ 
 
} 
 

 

 
.clients li { 
 
    display: inline-block; /* ADD THIS */ 
 
    padding: 15px 0px; 
 
    background: #f4f4f4; 
 
    border-bottom: 1px solid #ccc; 
 
    margin-bottom: 24px; 
 
    min-height:100px; 
 
    max-height:100px; 
 

 
    -webkit-transition: all .2s linear; 
 
    -moz-transition: all .2s linear; 
 
    -o-transition: all .2s linear; 
 
    -ms-transition: all .2s linear; 
 
    transition: all .2s linear; 
 
} 
 
img { 
 
    width: 100px; 
 
    height: 100px; 
 
}

<ul class="clients"> 
 
    <li><img src="http://img1.wikia.nocookie.net/__cb20100424121406/howtotrainyourdragon/images/b/b5/Toothless.png" /></li> 
 
    <li><img src="http://img1.wikia.nocookie.net/__cb20100424121406/howtotrainyourdragon/images/b/b5/Toothless.png" /></li> 
 
    <li><img src="http://img1.wikia.nocookie.net/__cb20100424121406/howtotrainyourdragon/images/b/b5/Toothless.png" /></li> 
 
</ul>

以下

Answer 2

使用此解決方案，您的圖像可以具有不同的尺寸（高度始終相同，根據圖像寬度會有所不同），圖像將水平對齊中心並粘到底部。

Fiddle

HTML：

<ul class="clients"> 
    <li><img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" /></li> 
    <li><img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg" /></li> 
    <li><img src="http://www.spacew.com/gallery/image006169.jpg" /></li> 
</ul> 

CSS：

.clients { 
    list-style: none; 
    margin-bottom: 16px;  
} 

.clients li { 
    display: block; 
    position: relative; 
    padding: 15px 0px; 
    background: #f4f4f4; 
    border-bottom: 1px solid #ccc; 
    margin-bottom: 24px; 
    height:100px; 

    -webkit-transition: all .2s linear; 
    -moz-transition: all .2s linear; 
    -o-transition: all .2s linear; 
    -ms-transition: all .2s linear; 
    transition: all .2s linear; 
} 

.clients img { 
    display: block; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto; 
    height: 50px; 
}