CSS: блок отображения, первый элемент выровнен неправильно

Я пытаюсь центрировать/выровнять элементы по вертикали внутри div, используя display: block. Но почему-то, я до сих пор не знаю почему, первый элемент div не центрирован должным образом, как будто он немного смещен влево, а иногда и вправо.

Это то, что я пытаюсь закодировать

<!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 */
}

Вот jsfiddle реализации, показывающей это: https://jsfiddle.net/nothingman/pz8skL36/

Я пробовал использовать align-items: center и justify-contents: center, но все равно не работает.

🤔 А знаете ли вы, что...
HTML предоставляет атрибуты для задания альтернативного текста и описания изображений и мультимедиа.

[РЕШЕНО]Перейти к решению

Html113619 вопросов Css75481 вопрос Alignment714 вопросов Display481 вопрос

Ответы:

Чтобы использовать такие свойства, как justify и align, вам необходимо использовать правильное отображение. CSS Grid будет работать хорошо.

.main-header > *:nth-child(1 of h1){
    display: grid;
    justify-items: center; 
}

вот изменения

/*
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>

удалено погружение

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

добавить навигационный тег

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

Цитата

Решено

Если вы хотите центрировать/выравнивать элементы внутри div <div class = "container main-header"></div> по вертикали, вам нужно установить правило CSS для класса. Отобразите его сгибанием и используйте flex-direction, чтобы разместить их в столбце, вместо того, чтобы устанавливать выравнивание для каждого тега h1. при этом вам не нужно нацеливаться на всех <h1>.

Подробнее о flex и flex-direction можно узнать здесь: https://www.w3schools.com/cssref/css3_pr_flex-direction.php

.main-header {
  width: 100vw;
  height: 60%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

CSS: блок отображения, первый элемент выровнен неправильно

Ответы:

Интересные вопросы для изучения