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>