我如何对齐以将巨型飞行器和导航栏垂直居中？

问题描述 投票：0回答：4

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

<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

html bootstrap-4
4个回答
0
投票

您只需要使用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/

-1
投票

在CSS中添加ul{margin:auto;}，以使导航栏保持水平居中。您的内容已经垂直居中。

-1
投票
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>
-1
投票

正如我所看到的，您正在使用Bootstrap，因此最好的解决方案是使用特定于Bootstrap的预定义样式来解决该问题。有一个自举解决方案-我100％确信，但现在找不到。也许尝试下面的快速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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.