将图像对齐垂直中心

Question

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

 .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

Answer 1

You can do this using 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

for vertical-align: middle you have to put images in single 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> 

Answer 3

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

For vertically and horizontally center alignments of image's

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

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