Теги
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;
}
}
