对齐垂直中心的图像

Question

我想在列表项中有3个图像，我想在div'contrice'contand__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>

我的图像出于某种目的为各个高度。

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

对于垂直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>

您也可以使用position: absolute;进行支持，以支持较旧的浏览器只需在图像上添加 css （您要中心）

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

添加位置：相对；到父元素，例如：在您的情况下， 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>