在垂直中心對齊圖像

Question

我在列表項中有3個圖像我想在div'contains__teaser'的垂直中心的中心設置圖像。

.content__teaser { 
 
    text-align: center; 
 
    margin-bottom: 15px; 
 
    height: 110px; 
 
} 
 
.contentContainer ul { 
 
    list-style-type: none; 
 
} 
 
ul .thumbnailIcon { 
 
    width: 100%; 
 
    margin-left: 31%; 
 
    height: 100%; 
 
} 
 
.thumbnailIcon li { 
 
    float: left; 
 
    margin-left: 16px; 
 
    height: 110px; 
 
} 
 
.thumbnailIcon .img-circle { 
 
    border-radius: 50%; 
 
    border: 4px solid #ffffff !important; 
 
} 
 
.thumbnailIcon .img-circle { 
 
    margin: auto; 
 
    border-radius: 50%; 
 
    border: 4px solid #ffffff !important; 
 
} 
 
.content__teaser img { 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
}

<div class="content__teaser col-md-12"> 
 
    <ul class="thumbnailIcon flex-direction-nav"> 
 
     <li class=""><img class="videoThumbnail img-circle" src="https://www.w3schools.com/css/paris.jpg" draggable="false" style="width: 100px;"></li> 
 
     <li class=""><img class="videoThumbnail img-circle" src="https://www.w3schools.com/css/paris.jpg" draggable="false" style="width: 120px;"></li> 
 
     <li class=""><img class="videoThumbnail img-circle" src="https://www.w3schools.com/css/paris.jpg" draggable="false" style="width: 100px;"></li> 
 
    </ul> 
 
</div>

我的圖片是在不同的高度，一些purpose.I要對齊的圖像中的」垂直中心.content__teaser'.now所有圖像都貼頂

Answer 1

可以使用display:flex

.content__teaser { 
 
    text-align: center; 
 
    margin-bottom: 15px; 
 
    height: 110px; 
 
} 
 
.contentContainer ul { 
 
    list-style-type: none; 
 
} 
 
ul .thumbnailIcon { 
 
    width: 100%; 
 
    margin-left: 31%; 
 
    height: 100%; 
 
} 
 
.thumbnailIcon li { 
 
    float: left; 
 
    margin-left: 16px; 
 
    height: 110px; 
 
    align-items: center; 
 
    display: flex; 
 
} 
 
.thumbnailIcon .img-circle { 
 
    border-radius: 50%; 
 
    border: 4px solid #ffffff !important; 
 
} 
 
.thumbnailIcon .img-circle { 
 
    margin: auto; 
 
    border-radius: 50%; 
 
    border: 4px solid #ffffff !important; 
 
} 
 
.content__teaser img { 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
}

<div class="content__teaser col-md-12"> 
 
    <ul class="thumbnailIcon flex-direction-nav"> 
 
    <li class=""><img class="videoThumbnail img-circle" src="https://www.w3schools.com/css/paris.jpg" draggable="false" style="width: 100px;"></li> 
 
    <li class=""><img class="videoThumbnail img-circle" src="https://www.w3schools.com/css/paris.jpg" draggable="false" style="width: 120px;"></li> 
 
    <li class=""><img class="videoThumbnail img-circle" src="https://www.w3schools.com/css/paris.jpg" draggable="false" style="width: 100px;"></li> 
 
    </ul> 
 
</div>

Answer 2

爲垂直對齊：中間你必須把圖像單節鋰

.content__teaser { 
 
    text-align: center; 
 
    margin-bottom: 15px; 
 
    height: 110px; 
 
} 
 
.contentContainer ul { 
 
    list-style-type: none; 
 
} 
 
ul .thumbnailIcon { 
 
    width: 100%; 
 
    margin-left: 31%; 
 
    height: 100%; 
 
} 
 
.thumbnailIcon li { 
 
    float: left; 
 
    margin-left: 16px; 
 
    height: 110px; 
 
    vertical-align: middle; 
 
    
 
} 
 
.thumbnailIcon .img-circle { 
 
    border-radius: 50%; 
 
    border: 4px solid #ffffff !important; 
 
    vertical-align: middle; 
 
} 
 
.thumbnailIcon .img-circle { 
 
    margin: auto; 
 
    border-radius: 50%; 
 
    border: 4px solid #ffffff !important; 
 
    vertical-align: middle; 
 
} 
 
.content__teaser img { 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
}

<div class="content__teaser col-md-12"> 
 
\t \t \t <ul class="thumbnailIcon flex-direction-nav"> 
 
     <li class=""> 
 
     <img class="videoThumbnail img-circle" src="https://www.w3schools.com/css/paris.jpg" draggable="false" style="width: 100px;"> 
 
     <img class="videoThumbnail img-circle" src="https://www.w3schools.com/css/paris.jpg" draggable="false" style="width: 120px;"> 
 
     <img class="videoThumbnail img-circle" src="https://www.w3schools.com/css/paris.jpg" draggable="false" style="width: 100px;"> 
 
     </li> 
 
     </ul> 
 
     
 
     </div>

Answer 3

可以使用position: absolute;支持做這樣做舊的瀏覽器太 剛上添加圖像CSS（要到中心）

對於圖像的

添加位置的垂直和水平中心對齊：相對;父元素，e.g：在你的情況ul li是圖像的父

.thumbnailIcon li { 
    height: 210px; 
    background: #c3c3c3; /* to show your parent area*/ 
    position: relative; 
    width: 150px; /* required (you can give in percentage)*/ 
} 

對於垂直和水平方向中心對齊圖像

ul li img { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    margin: auto; 
} 

.content__teaser { 
 
    text-align: center; 
 
    margin-bottom: 15px; 
 
    height: 110px; 
 
} 
 

 
.contentContainer ul { 
 
    list-style-type: none; 
 
} 
 

 
ul .thumbnailIcon { 
 
    width: 100%; 
 
    margin-left: 31%; 
 
    height: 100%; 
 
} 
 

 
.thumbnailIcon li { 
 
    float: left; 
 
    margin-left: 16px; 
 
    height: 210px; 
 
    background: #c3c3c3; 
 
    position: relative; 
 
    width: 150px; 
 
} 
 

 
.thumbnailIcon .img-circle { 
 
    border-radius: 50%; 
 
    border: 4px solid #ffffff !important; 
 
} 
 

 
ul li img { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    margin: auto; 
 
} 
 

 
.thumbnailIcon .img-circle { 
 
    margin: auto; 
 
    border-radius: 50%; 
 
    border: 4px solid #ffffff !important; 
 
} 
 

 
.content__teaser img { 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
}

<div class="content__teaser col-md-12"> 
 
    <ul class="thumbnailIcon flex-direction-nav"> 
 
    <li class=""><img class="videoThumbnail img-circle" src="https://www.w3schools.com/css/paris.jpg" draggable="false" style="width: 100px;"></li> 
 
    <li class=""><img class="videoThumbnail img-circle" src="https://www.w3schools.com/css/paris.jpg" draggable="false" style="width: 120px;"></li> 
 
    <li class=""><img class="videoThumbnail img-circle" src="https://www.w3schools.com/css/paris.jpg" draggable="false" style="width: 100px;"></li> 
 
    </ul> 
 
</div>