Question 360506 in Html Question posted in
Some basic documentation can be found here.

Html – CSS: Display block, first item is not aligned correctly

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

Tags:

3

Answers


  1. 0

    To use properties like justify and align you need to use the correct display.
    CSS Grid would work nicely.

    .main-header > *:nth-child(1 of h1){
    display: grid;
    justify-items: center; 
}
    Login or Signup to reply.
  2. 0

    here is the changes

    /*
Palette

#F5F5F5
#B0D7FF
#709FDF
#3066BE
#040910


*/

* {
    margin: 0;
    padding: 0;
    font-family: "Poppins";
}


/* Section 1, Intro */

.intro {
    height: 100vh;
}

nav{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

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 {
    display: flex;
    align-items: center;
    justify-content: center;
    /* flex: 1; */
    height: 10%;
    box-sizing: border-box;
    list-style: none;
}

/* IPAD/TABLETS MEDIA */

/* MAIN-HEADER */

.main-header {
    display: flex;
    width: 100vw;
    height: 60%;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    align-items : center; /* Reset display property to block */
    
    margin-top: 2rem;
}

/* .main-header {
   
} */

    <!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="main.css">
  <title>Arya's Portfolio</title>
</head>
<body>

    • removed dive

       <section class="section intro">
 <nav class="navbar">

    • add nav tag

          <p><a href="#">LastCleanShirt</a></p> 
   <ul>
     <li style="float:left;"></li>
     <li><a href="#">About me</a></li>
     <li><a href="#">Contact me</a></li>
   </ul>
 </nav>
   <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>

    Blockquote

    Login or Signup to reply.
  3. 0

    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>.

    See more on flex & flex-direction here: https://www.w3schools.com/cssref/css3_pr_flex-direction.php

    .main-header {
  width: 100vw;
  height: 60%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search