我嘗試將一個元素垂直居中放置在頁面上。這很好用。但是如果我添加一個導航欄，元素會垂直居中，但與導航欄的高度有一個偏移。如何將內容容器垂直居中，包括導航欄高度？
body,html {
height: 100%;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-light bg-light">
<span class="navbar-brand h1">Navbar</span>
</nav>
<div class="container d-flex h-100">
<div class="row align-self-center w-100">
<div class="col-6 mx-auto">
<div class="jumbotron">
<h1 class="display-4 text-truncate">Jumbotron</h1>
<p class="lead">This is a simple hero unit.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
</div>
</div>
</div>uj5u.com熱心網友回復：
您可以通過fixed-top向其添加類來將導航欄固定在頂部。
body,html {
height: 100%;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-light bg-light fixed-top">
<span class="navbar-brand h1">Navbar</span>
</nav>
<div class="container d-flex h-100">
<div class="row align-self-center w-100">
<div class="col-6 mx-auto">
<div class="jumbotron">
<h1 class="display-4 text-truncate">Jumbotron</h1>
<p class="lead">This is a simple hero unit.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/320816.html
上一篇：如何一次只顯示一個可折疊元素？
下一篇：在網頁設計中將頁面分成一個部分