将图像对齐垂直中心

Question

我在列表项中有3个图像我想在div的垂直中心设置图像＆＃39; contains__teaser＆＃39;。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

出于某种目的，我的图像处于不同的高度。我想将图像对准在＆＃39; .content__teaser＆＃39;的垂直中心。现在所有图像都贴在顶部

Answer 1

您可以使用compile 'com.google.android.gms:play-services-location:10.2.0' compile 'com.google.android.gms:play-services-auth:10.2.0' compile 'com.google.firebase:firebase-database:10.2.0' compile 'com.google.firebase:firebase-core:10.2.0' compile 'com.google.firebase:firebase-messaging:10.2.0'

执行此操作

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;
}

Answer 2

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;