Question

我想问一下如何将超大型飞机和导航栏垂直对准中心？我已经做了整整一天的工作，但仍然无法解决。如果有人能指出正确的方向，我将不胜感激。

<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

Answer 1

您只需要使用m-auto即可设置margin-left和margin-right，以便在导航栏中显示内容。

就这样：

<!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/

Answer 2

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>

如何对齐以将居中导航器和导航栏垂直居中？

2 个答案: