堆栈内存溢出
  简体   繁体   English

将显示图像垂直居中于固定高度的Bootstrap轮播

[英]Vertically center the showing images on a fixed height Bootstrap carousel

 原文  2015-06-30 19:08:10  9   4    javascript/ jquery/ css/ twitter-bootstrap/ twitter-bootstrap-3

问题描述

Maybe this is one of the toughest challenges, how can I vertically align in the middle the showing images on this fixed height Bootstrap (v3.3.5) carousel? 也许这是最棘手的挑战之一，如何在这个固定高度Bootstrap （v3.3.5）旋转木马上显示图像的中间垂直对齐？ I'd tried to display some classes as a table-cell and vertical-align them to middle but there's still a problem, the sliding image will just be vertically aligned when sliding-completed or when .active but it will also placed the image on the right side instead to the center. 我试图将一些类display为table-cell并将它们vertical-align到middle但是仍然存在问题，滑动图像将在滑动完成时或者在.active时垂直对齐，但它也会将图像放在上面右侧而不是中心。 

 /* The styles that I tried. .carousel-inner > .item.next.left, .carousel-inner > .item.prev.right, .carousel-inner > .item.active { display: table-cell; vertical-align: middle; } */ .carousel-inner > .item { height: 150px; } .carousel-inner img { margin: auto; } 
 <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> </head> <body> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="http://placehold.it/350x65" alt="350x65"> <div class="carousel-caption"> <h3>Item 1</h3> <p>Not vertically center..</p> </div> </div> <div class="item"> <img src="http://placehold.it/350x150" alt="350x150"> <div class="carousel-caption"> <h3>Item 2</h3> <p>The image height is just fit..</p> </div> </div> <div class="item"> <img src="http://placehold.it/200x100" alt="200x100"> <div class="carousel-caption"> <h3>Item 3</h3> <p>Not vertically center..</p> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </body>

4 个解决方案

解决方案1
 7 已采纳  2015-06-30 19:14:10

Add this to your css: 将此添加到您的CSS： 

.carousel-inner .item img {
    position:relative;
    top:50%;
    transform: translateY(-50%);
}

解决方案2
 3  2015-06-30 19:17:37

You can position the element absolutely ensuring the parent element is position relative so that the child element respects it's position to it. 您可以绝对确定元素的位置，确保父元素的位置相对，以便子元素尊重它的位置。 

.carousel-inner > .item {
    height: 150px;
    position: relative;
}

.carousel-inner img {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

解决方案3
 0  2015-06-30 19:16:58

Set position:absolute , all sides to 0 and margin:auto . 设置position:absolute ，所有边都为0 ， margin:auto 。

Here you go: 干得好： 

 /* The styles that I tried. .carousel-inner > .item.next.left, .carousel-inner > .item.prev.right, .carousel-inner > .item.active { display: table-cell; vertical-align: middle; } */ .carousel-inner > .item { height: 150px; } .carousel-inner img { margin: auto; } .carousel-inner .item img { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } 
 <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> </head> <body> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="http://placehold.it/350x65" alt="350x65"> <div class="carousel-caption"> <h3>Item 1</h3> <p>Not vertically center..</p> </div> </div> <div class="item"> <img src="http://placehold.it/350x150" alt="350x150"> <div class="carousel-caption"> <h3>Item 2</h3> <p>The image height is just fit..</p> </div> </div> <div class="item"> <img src="http://placehold.it/200x100" alt="200x100"> <div class="carousel-caption"> <h3>Item 3</h3> <p>Not vertically center..</p> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </body>

解决方案4
 0  2015-06-30 19:18:28

See if this is what you're looking for: should probably test it with actual images just to make sure it looks right. 看看这是否是您正在寻找的：应该用实际图像测试它，以确保它看起来正确。 

.carousel-inner .item img {
margin: 0px auto;
height: 150px;
text-align: center;

} }

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在固定高度的div内将动态高度的图像垂直居中？ - How to vertically center images of dynamic height inside a div of fixed height? 引导程序3轮播固定高度 - bootstrap 3 carousel fixed height 使用猫头鹰转盘和Bootstrap 3使图像的宽度和高度居中 - Have images center the width and height using owl carousel and Bootstrap 3 引导轮播不显示图像 - Bootstrap carousel not showing images 垂直对齐固定高度div中的图像 - Vertically aligning images in a fixed height div 猫头鹰旋转木马尽管显示高度仍未显示图像 - Owl carousel not showing images despite height given React-bootstrap Carousel 中的图像未显示 - Images in React-bootstrap Carousel Not Showing Bootstrap Carousel无法工作（一次显示所有图像） - Bootstrap Carousel not Working (showing all images at once) OWL Carousel 固定高度？ - OWL CAROUSEL fixed height? 垂直对齐的指示器Bootstrap轮播 - Vertically aligned indicators Bootstrap carousel
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM