在垂直中心对齐图像

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>