0
votes

justifier les problèmes de contenu, aligner fonctionne mais ne pas justifier?

J'essaie de centrer les éléments verticalement avec justify-content tout en utilisant la propriété flex-column appliquée. align-items fonctionne comme il se doit mais le contenu ne répond pas à l'axe Y. J'ai commenté align-items, je ne veux pas centrer l'axe X, juste l'axe Y.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="img1">
  <div class="container img1-container d-flex flex-column justify-content-center">
    <h1 class="into-text web-dev"> Front-End Web Developer</h1>
    <h4 class="into-text john-sass">John Sasser</h4>

  </div>
</div>

.img1-container {
  display: flex;
  justify-content: center;
  /* align-items: center; */
  height: 100%;
}

.web-dev {
  display: flex;
  font-size: 60px;
}

.john-sass {
  display: flex;
  font-size: 48px;
  margin-left: 38.5%;
}

css bootstrap-4

2 commentaires

supprimer la marge gauche: 38,5%;

J'ai eu le problème avant cet ajout, j'ai essayé à nouveau sans lui et même problème.

5 Réponses :

1
votes

Vous devez faire une gestion des div pour bien faire les choses, comme ceci,

    <div class="img1">
        <div class="container img1-container d-flex flex-column justify-content-center">
          <div class="content">
            <h1 class="into-text web-dev"> Front-End Web Developer</h1>
            <h4 class="into-text john-sass">John Sasser</h4>
         </div>
        </div>
    </div>

.img1 {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.container {
  display: table-cell;
  vertical-align: middle;
}

.content{
  margin-left: auto;
  margin-right: auto;
  width: 400px;
}

0 commentaires

1
votes

ajoutez simplement justify-content: space-between; à votre classe .img1-container au lieu de justify-content: center;

<div class="img1">
    <div class="container img1-container d-flex flex-column justify-content-center">
      <h1 class="into-text web-dev"> Front-End Web Developer</h1>
      <h4 class="into-text john-sass">John Sasser</h4>

    </div>
  </div>

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .img1-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 100%;
    background-color: gray;
    padding: 30px 0px;
  }

  .web-dev {
   font-size: 60px;
 }

 .john-sass {
   font-size: 48px;
 }

1 commentaires

Huh, j'ai essayé ça aussi. Ce doit être quelque chose d'autre localement qui cause le problème. Je vais continuer à chasser et répondre si / quand je le trouve enfin ha

1
votes

Cela fonctionne très bien avec align-items: center; Vous ne pourrez peut-être pas le remarquer, Voici l'exemple de travail. Dis-moi si j'ai raté quelque chose https://codepen.io/shivam1100/pen/yLymveb?editors=1100

1 commentaires

hein, ça doit être autre chose localement.

-1
votes

C'était la hauteur sur le conteneur img1 ..... Je suppose que l'ajout de la propriété height perturbe le code derrière la flexbox.

0 commentaires

0
votes

Je garde une largeur de 100% et une hauteur de vue de 100%

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="img1">
  <div class="container img1-container">
    <h1 class="into-text web-dev">Front-End Web Developer</h1>
    <h4 class="into-text john-sass">John Sasser</h4>
  </div>
</div>

.img1{
  width: 100%;
  height:100%;
}

.img1-container{
  height:100vh;
  display: flex;
  flex-direction:column;
  align-items:center;
  text-align: center;
}

1 commentaires

J'utilisais la hauteur: 100%; au lieu de vh dans le .img1-container {}