垂直对齐图像

debugcn 发表于 Dev

用户3386779

我在列表项中有 3 个图像我想将图像设置在 div 'contain__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>

我的图像出于某种目的处于不同的高度。我想将图像对齐在“.content__teaser”的垂直中心。现在所有的图像都贴在顶部

穆克什·拉姆（Mukesh Ram）

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。