div 部分中的文本和元素未在頁面中心對齊

Question

類中心內的 h1 和 p 標簽未與中心對齊。 我嘗試了各種代碼組合，但沒有任何效果。

這是我的 html 代碼這個 html 代碼是從 bootstrap 網站復制的，我為我的項目做了一些編輯。

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">     <link rel="stylesheet" href="css/technical_landing.css">    <link href="https://fonts.googleapis.com/css?family=Catamaran&display=swap" rel="stylesheet">   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">   <title>Minimum Bootstrap HTML Skeleton</title>

    <!--  -->

    <style>

    </style>    

</head>

<body>

     <nav class="navbar navbar-expand-lg navbar-light bg-light">   <a class="navbar-brand" href="#">Technical lab</a>   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>   </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact us</a>
      </li>


    </ul>    <nav class="navbar navbar-expand-lg navbar-light bg-light">

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>   </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Sign Up <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Log in</a>
      </li>


    </ul>
      </div> </nav>   </div> </nav>

    <div class="container center">  <div class="row">
        <div class="<col-md-12>">
            <h2>
                <span class="fa-stack fa-lg">
                    <i class="far fa-square fa-stack-2x"></i>
                    <i class="fab fa-twitter-square fa-stack-1x"></i>
                </span>
            </h2>
            <h1>Technical lab is coming soon.</h1>
            <p>Waiting is not easy but just wait this time</p>
            <button class="btn btn-success btn-lg">
            <i class="fas fa-spinner"></i>
            <br>Click me</button>


        </div>  </div>  </div>


    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

    <script>    </script>

</body>

</html>

這是 css 代碼是我的 css 部分，請檢查這里的 .center 部分。 我已經嘗試了很多代碼來將這些元素放在頁面的中心，但沒有任何效果對我有用。

    /*<!--https://images.unsplash.com/photo-1537498425277-c283d32ef9db?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80-->*/

html{
    height: 100%;
}

.navbar-light .navbar-brand{
    color: black;
}

body{
     background:linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)),url(https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=752&q=80)
    no-repeat center center fixed ;
    background-size:cover;
    background-position: center;
    font-family: catamaran;
}



    .center{

        text-align: center; 
        margin:0 auto;
        padding:5%;
        position: absolute;
        top:0;
        bottom: 0;
        left: 0;
        right: 0;  



    }

.navbar{
    height: 45px;
}

h1,p{
    color: black;

}

h2>span{
    color: black;
}

@media (max-width:768px) {
    h1 {
        background-color: #449d44;
    }
    h2{
        background-color: #449d44;
    }
}

@media (min-width:768px)    {
    h1{
        background-color:skyblue;
    }
}

Answer 1

所以你可以看到文本在屏幕中心對齊但沒有對齊，原因是看起來 div 的寬度需要設置為 100%。

嘗試將 width: 100% 添加到 .center 類。

div 部分中的文本和元素未在頁面中心對齊

問題描述

1 個解決方案

解決方案1
0 2020-02-10 21:23:09

div 部分中的文本和元素未在頁面中心對齊

問題描述

1 個解決方案

解決方案1 0 2020-02-10 21:23:09

解決方案1
0 2020-02-10 21:23:09