Bootstrap 轮播 - 对齐<video> div的垂直中间</video>

Question

你能看看我的代码吗？

 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js" integrity="sha384-3qaqj0lc6sV/qpzrc1N5DC6i1VRn/HyX4qdPaiEFbn54VjQBEU341pvjz7Dv3n6P" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css" integrity="sha384-SI27wrMjH3ZZ89r4o+fGIJtnzkAnFs3E4qz9DIYioCQ5l9Rd/7UAa8DHcaL8jkWt" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col-sm-6"> <div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="//via.placeholder.com/787x787" alt="First slide"> </div> <div class="carousel-item"> <video id="product-image-BMW©Tailpipe©Trim-0" class="d-block w-100" width="100%" controls="" preload="auto" muted="" autoplay=""> <source src="https://youtu.be/vjhbm67KW1U?list=PLzgoLd4TRmNrR9m-RwfMtRM8qud3t7kjp" type="video/mp4"> <source src="https://youtu.be/vjhbm67KW1U?list=PLzgoLd4TRmNrR9m-RwfMtRM8qud3t7kjp" type="video/webm"> </video> </div> <div class="carousel-item"> <img class="d-block w-100" src="//via.placeholder.com/787x787" alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> <div class="col-sm-6"> <h2>Description</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </div>

我需要将此<video>在 div 的垂直中间对齐（考虑图像 div 的高度） 。

请注意：父 div（carousel-item）不应该有固定的高度，因为它是响应式的。

JSFiddle

Answer 1

在自定义 CSS spine 中使用 Bootstrap 4 对齐类和带有margin-top的translateY ，再加上将w-100添加到<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">导致了这个：

 .carousel-item video { transform: translateY(-50%); margin-top: 50%; width: 100%; height: auto; }

 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js" integrity="sha384-3qaqj0lc6sV/qpzrc1N5DC6i1VRn/HyX4qdPaiEFbn54VjQBEU341pvjz7Dv3n6P" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css" integrity="sha384-SI27wrMjH3ZZ89r4o+fGIJtnzkAnFs3E4qz9DIYioCQ5l9Rd/7UAa8DHcaL8jkWt" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col-sm-6 d-flex align-items-center"> <div id="carouselExampleControls" class="carousel slide w-100" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="//via.placeholder.com/787x787" alt="First slide"> </div> <div class="carousel-item"> <video id="product-image-BMW©Tailpipe©Trim-0" class="d-block w-100" controls="" preload="auto" muted="" autoplay=""> <source src="https://youtu.be/vjhbm67KW1U?list=PLzgoLd4TRmNrR9m-RwfMtRM8qud3t7kjp" type="video/mp4"> <source src="https://youtu.be/vjhbm67KW1U?list=PLzgoLd4TRmNrR9m-RwfMtRM8qud3t7kjp" type="video/webm"> </video> </div> <div class="carousel-item"> <img class="d-block w-100" src="//via.placeholder.com/787x787" alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> <div class="col-sm-6 d-flex align-items-center"> <div> <h2>Description</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </div> </div>

Answer 2

在这里你需要添加 class align-items-center和row

和d-flex align-items-center这两个类以及carousel-inner 。

希望这会帮助你。

 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js" integrity="sha384-3qaqj0lc6sV/qpzrc1N5DC6i1VRn/HyX4qdPaiEFbn54VjQBEU341pvjz7Dv3n6P" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css" integrity="sha384-SI27wrMjH3ZZ89r4o+fGIJtnzkAnFs3E4qz9DIYioCQ5l9Rd/7UAa8DHcaL8jkWt" crossorigin="anonymous"> <div class="container"> <div class="row align-items-center"> <div class="col-sm-6"> <div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <div class="carousel-inner d-flex align-items-center"> <div class="carousel-item active"> <img class="d-block w-100" src="//via.placeholder.com/787x787" alt="First slide"> </div> <div class="carousel-item"> <video id="product-image-BMW©Tailpipe©Trim-0" class="d-block w-100" width="100%" controls="" preload="auto" muted="" autoplay=""> <source src="https://youtu.be/vjhbm67KW1U?list=PLzgoLd4TRmNrR9m-RwfMtRM8qud3t7kjp" type="video/mp4"> <source src="https://youtu.be/vjhbm67KW1U?list=PLzgoLd4TRmNrR9m-RwfMtRM8qud3t7kjp" type="video/webm"> </video> </div> <div class="carousel-item"> <img class="d-block w-100" src="//via.placeholder.com/787x787" alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> <div class="col-sm-6"> <h2>Description</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </div>

Answer 3

这绝对可以由 flexbox 处理，较新版本的 Bootstrap 支持。

我相信您的元素的正确语法是class="d-flex justify-content-center" 。 如果您想详细了解不同的启用 flexbox 的 Bootstrap 语法的细节，我会查看W3Schools 指南

这是一篇非常好的文章，作为“ Flexboxes 的完整指南”，绝对值得任何进行 Web 开发的人阅读（特别是移动开发，动态或反应式样式很重要）

Answer 4

请检查这可能会有所帮助。 我在行中使用align-items-center 。

 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js" integrity="sha384-3qaqj0lc6sV/qpzrc1N5DC6i1VRn/HyX4qdPaiEFbn54VjQBEU341pvjz7Dv3n6P" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css" integrity="sha384-SI27wrMjH3ZZ89r4o+fGIJtnzkAnFs3E4qz9DIYioCQ5l9Rd/7UAa8DHcaL8jkWt" crossorigin="anonymous"> <div class="container"> <div class="row align-items-center"> <div class="col-sm-6"> <div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="//via.placeholder.com/787x787" alt="First slide"> </div> <div class="carousel-item"> <video id="product-image-BMW©Tailpipe©Trim-0" class="d-block w-100" width="100%" controls="" preload="auto" muted="" autoplay=""> <source src="https://youtu.be/vjhbm67KW1U?list=PLzgoLd4TRmNrR9m-RwfMtRM8qud3t7kjp" type="video/mp4"> <source src="https://youtu.be/vjhbm67KW1U?list=PLzgoLd4TRmNrR9m-RwfMtRM8qud3t7kjp" type="video/webm"> </video> </div> <div class="carousel-item"> <img class="d-block w-100" src="//via.placeholder.com/787x787" alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> <div class="col-sm-6"> <h2>Description</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </div>

Answer 5

使用此解决方案：

就我而言， <video>纵横比可能因产品项目而异。 所以我使用 jQuery 为carousel item添加了高度，“高度将根据其宽度计算。” 然后，如果 div! 将<video>垂直放置在中间更容易！

 var cw = $('.carousel-item').width(); $('.carousel-item').css({ 'height': cw + 'px' });

 video { position: relative; top: 50%; transform: translateY(-50%); }

 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js" integrity="sha384-3qaqj0lc6sV/qpzrc1N5DC6i1VRn/HyX4qdPaiEFbn54VjQBEU341pvjz7Dv3n6P" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css" integrity="sha384-SI27wrMjH3ZZ89r4o+fGIJtnzkAnFs3E4qz9DIYioCQ5l9Rd/7UAa8DHcaL8jkWt" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col-sm-6"> <div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="//via.placeholder.com/787x787" alt="First slide"> </div> <div class="carousel-item"> <video id="product-image-BMW©Tailpipe©Trim-0" class="d-block w-100" width="100%" controls="" preload="auto" muted="" autoplay=""> <source src="https://youtu.be/vjhbm67KW1U?list=PLzgoLd4TRmNrR9m-RwfMtRM8qud3t7kjp" type="video/mp4"> <source src="https://youtu.be/vjhbm67KW1U?list=PLzgoLd4TRmNrR9m-RwfMtRM8qud3t7kjp" type="video/webm"> </video> </div> <div class="carousel-item"> <img class="d-block w-100" src="//via.placeholder.com/787x787" alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> <div class="col-sm-6"> <h2>Description</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </div>