Bootstrap 4中的垂直對齊容器
[英]Vertical align container in Bootstrap 4
問題描述
我在垂直對齊容器時遇到了一些麻煩。 我已經嘗試按照這篇文章中的步驟操作： Bootstrap 4 中的垂直對齊中心
這是一個學校項目，這是我第一次使用 HTML/CSS，所以我很不擅長。 唯一成功的是將容器設置為vh-100並在行上使用my-auto 。 我將這些行包裹在一個容器中以將它們保持在一起。 但是通過將容器設置為我的視口高度的 100%，它會使容器垂直溢出，導致它滾動。
其他建議對我的觀點沒有影響。 我不確定我哪里出錯了。
我在 CSS 文件中添加了一些自定義添加，但只是將卡片的高度調整為 400 像素並更改了一些顏色。 沒有添加，它也不起作用。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> <div class="container d-flex flex-column container-fluid"> <div class="wrapper"> <div class="row"> <div class="offset-2 col-sm-4"> <span>Title</span> </div> </div> <div class="row"> <div class="offset-2 col-sm-4"> <div class="card bg-black"> <div class="card-body text-center flex-column d-flex"> <img class="mx-auto" src="https://via.placeholder.com/100"/> <h2 class="card-title text-center text-on-dark font-weight-bold">Mentor</h2> <p class="card-text text-left text-on-dark px-5">Yada yada yada</p> <button type="button" class="btn btn-gold btn-lg rounded-pill align-self-center mt-auto mb-3" style="width: 230px">GRADE</button> </div> </div> </div> <div class="col-sm-4"> <div class="card bg-primary"> <div class="card-body text-center flex-column d-flex"> <img class="mx-auto" src="https://via.placeholder.com/100"/> <h2 class="card-title text-center text-white font-weight-bold">Student</h2> <p class="card-text text-left text-white px-5">Blah blah blah</p> <button type="button" class="btn btn-white btn-lg rounded-pill align-self-center mt-auto mb-3" style="width: 230px">STUDY</button> </div> </div> </div> </div> </div> </div>
1 個解決方案
解決方案1
0 2022-06-17 20:00:04
您還沒有特別清楚要居中的內容，但是要將容器在視口中垂直居中，將body元素（或新的父 div）設置為 100% 高度，添加 flex，然后將其內容與my-auto的居中對齊my-auto在容器上。
查看完整頁面演示以查看解決方案。
<head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> </head> <body class="vh-100 d-flex"> <div class="container d-flex flex-column container-fluid my-auto"> <div class="wrapper"> <div class="row"> <div class="offset-2 col-sm-4"> <span>Title</span> </div> </div> <div class="row"> <div class="offset-2 col-sm-4"> <div class="card bg-black"> <div class="card-body text-center flex-column d-flex"> <img class="mx-auto" src="https://via.placeholder.com/100" /> <h2 class="card-title text-center text-on-dark font-weight-bold">Mentor</h2> <p class="card-text text-left text-on-dark px-5">Yada yada yada</p> <button type="button" class="btn btn-gold btn-lg rounded-pill align-self-center mt-auto mb-3" style="width: 230px">GRADE</button> </div> </div> </div> <div class="col-sm-4"> <div class="card bg-primary"> <div class="card-body text-center flex-column d-flex"> <img class="mx-auto" src="https://via.placeholder.com/100" /> <h2 class="card-title text-center text-white font-weight-bold">Student</h2> <p class="card-text text-left text-white px-5">Blah blah blah</p> <button type="button" class="btn btn-white btn-lg rounded-pill align-self-center mt-auto mb-3" style="width: 230px">STUDY</button> </div> </div> </div> </div> </div> </div> </body>
IE10 + 11中flexbox容器中的垂直對齊（Bootstrap 3）元素
[英]Vertical align (Bootstrap 3) elements in flexbox container in IE10+11
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.