将图像对齐在垂直中心

I have 3 images in the list item I want to set the image in the center of the vertical center of the div 'contain__teaser'.

我在列表项中有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>

my images are in various height for some purpose.I want to align the image in vertical center of '.content__teaser'.now all the images are stick the top

为了某种目的,我的图像处于不同的高度。我想将图像对准'.content__teaser'的垂直中心。现在所有图像都贴在顶部

3 个解决方案

#1

You can do this using display:flex

你可以使用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>

#2

for vertical-align: middle you have to put images in single li

对于vertical-align:中间你必须将图像放在单个li中

.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">
			 <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>

#3

You can do it using position: absolute; for support older browser's too Just add CSS on image (which you want to center)

你可以使用position:absolute;支持旧浏览器也只需在图像上添加CSS(您想要居中)

For vertically and horizontally center alignments of image's

用于图像的垂直和水平中心对齐

Add position: relative; to parent element, for e.g: In your case ul li is parent of image

添加位置:相对;到父元素,例如:在你的情况下,ul li是图像的父元素

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

For vertically and horizontally center align images

用于垂直和水平中心对齐图像

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>

#1