如何对齐以垂直居中我的超大屏幕和导航栏？
[英]How do I align to vertically center my jumbotron and navbar?
问题描述
I like to ask how can I vertically align my jumbotron and navbar to the center?
我想问一下如何将我的超大屏幕和导航栏垂直对齐到中心？ I've been working on this for a whole day and still can't figure it out.我已经为此工作了一整天，但仍然无法弄清楚。 Really appreciate it if anyone can point me in the right direction.如果有人能指出我正确的方向，我将不胜感激。
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Nunito:800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="Project_T.css">
</head>
<body>
<div class="d_flex vh-100">
<div class=".container-fluid m-auto">
<div class="jumbotron text-center" style="margin-bottom:0">
<h1> Welcome to <div style="font-family:'Nunito',sans-serif">Project_T </h1>
</div>
</div>
<div class="navbar navbar-expand-sm bg-dark navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Buy</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
</div>
</body>
https://imgur.com/gallery/AkqBoqr https://imgur.com/gallery/AkqBoqr
2 个解决方案
解决方案1
0 2019-11-30 04:01:33
Add ul{margin:auto;} in your CSS to keep navbar horizontally center. 在您的CSS中添加ul{margin:auto;} ，以使导航栏保持水平居中。 Your content is already vertically center. 您的内容已经垂直居中。
解决方案2
0 2019-11-30 09:48:02
You just have to use m-auto which sets margin-left and margin-right so as to make content at the centre in the navbar.您只需要使用设置margin-left和margin-right的m-auto即可使内容位于导航栏的中心。
This is it:就是这个：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<title>Title</title>
<style>
</style>
</head>
<body>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Nunito:800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="Project_T.css">
</head>
<body>
<div class="d_flex vh-100">
<div class=".container-fluid m-auto">
<div class="jumbotron text-center" style="margin-bottom:0">
<h1> Welcome to <div style="font-family:'Nunito',sans-serif">Project_T </h1>
</div>
</div>
<div class="navbar navbar-expand-sm bg-dark navbar-dark ">
<ul class="navbar-nav m-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Buy</a>
</li>
<li class="nav-item active m-auto">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</body>
</html>
https://jsfiddle.net/sugandhnikhil/2ow7xa3f/ https://jsfiddle.net/sugandhnikhil/2ow7xa3f/
解决方案3
-1 2019-11-30 07:43:44
Replace your code with this.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Nunito:800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="Project_T.css">
</head>
<body>
<div class="d-flex flex-column justify-content-center vh-100">
<div class="container-fluid p-0">
<div class="jumbotron text-center" style="margin-bottom:0">
<h1> Welcome to <span style="font-family:Nunito,sans-serif">Project_T</span></h1>
</div>
<div class="navbar navbar-expand-sm bg-dark navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Buy</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
</div>
</body>
解决方案4
-1 2019-11-30 09:00:38
As I can see, You are using Bootstrap, so the best solution would be to use bootstrap-specific predefined styles to fix that. 如我所见，您正在使用Bootstrap，因此最好的解决方案是使用特定于引导程序的预定义样式来解决该问题。 There is a bootstrap solution for that - I'm 100% sure but I couldn't find it now. 有一个自举解决方案-我100％确信，但现在找不到。 Maybe try the below quick CSS fix :) 也许尝试下面的快速CSS修复:)
.navbar-nav { margin: 0 auto; }
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <link href="https://fonts.googleapis.com/css?family=Nunito:800&display=swap" rel="stylesheet"> <link rel="stylesheet" href="Project_T.css"> </head> <body> <div class="d_flex vh-100"> <div class=".container-fluid m-auto"> <div class="jumbotron text-center" style="margin-bottom:0"> <h1> Welcome to <div style="font-family:'Nunito',sans-serif">Project_T </h1> </div> </div> <div class="navbar navbar-expand-sm bg-dark navbar-dark"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Buy</a> </li> <li class="nav-item active"> <a class="nav-link" href="#">Contact Us</a> </li> </ul> </div> </div> </div> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.