Im trying to vertically center/align items within a div using display: block. But somehow, i still don't know why, the first item of that div isn't centered properly, it's like it got indented a bit to the left or sometimes to the right.
This is what i'm trying to code
<!DOCTYPE html>
<!-- FIXME: [X] Fix animesearch/refactor, migrate jikan api to v4-->
<!-- TODO (PRIORITY): [ ] Fix ani-cli, migrate from jikan v3 to v4-->
<!-- TODO: [ ] Fix ani-cli, creating a config.json when installing-->
<!-- TODO (Optional): [ ] Fix sycpll-->
<!-- TODO: [ ] Colect all the projects (OMW)-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/main.css">
<title>Arya's Portfolio</title>
</head>
<body>
<div class="website">
<section class="section intro">
<ul class="navbar">
<li style="float:left;"><a href="#">LastCleanShirt</a></li>
<li><a href="#">About me</a></li>
<li><a href="#">Contact me</a></li>
</ul>
<div class="container main-header">
<h1>I'm</h1> <!-- This one -->
<h1>Aryasatya</h1>
<h1>I'm</h1>
<h1>Aryasatya</h1>
<h1>I'm</h1>
<h1>Aryasatya</h1>
</div>
</section>
</div>
</body>
</html>
/*
Palette
#F5F5F5
#B0D7FF
#709FDF
#3066BE
#040910
*/
* {
margin: 0;
padding: 0;
font-family: "Poppins";
}
/* Section 1, Intro */
.intro {
height: 100vh;
}
li {
display: inline;
float: right;
margin: 30px;
margin-top: 10px;
padding: 10px;
width: fit-content;
height: fit-content;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
li > a {
font-weight: 600;
font-size: 20px;
text-decoration: none;
color: #040910;
background: white;
background: linear-gradient(to left, white 51%, #3066BE 50%) right;
background-size: 200%;
transition: .5s ease-out;
padding: 8px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
li > a:hover {
background-position: left;
color: #F5F5F5;
}
ul {
flex: 1;
height: 10%;
box-sizing: border-box;
}
/* IPAD/TABLETS MEDIA */
/* MAIN-HEADER */
.main-header {
width: 100vw;
height: 60%;
align-items : center; /* Reset display property to block */
margin-bottom: 0;
}
.main-header > * {
justify-contents: center; /* Set display property of child elements to block */
/* Automatically center them horizontally */
}
.main-header > h1 {
margin-bottom: 0; /* Add some space between h1 elements */
}
Here is a jsfiddle of the implementation showing it: https://jsfiddle.net/nothingman/pz8skL36/
I tried to use align-items: center and justify-contents: center but it still doesn't work
If you want to vertically centre/align items within the div
<div class="container main-header"></div>you need to set the CSS rule on the class. Display flex it and use flex-direction to get them on a column, instead of setting the alignment on each h1 tag. with this you don't need to target all<h1>.