web-dev-qa-db-fra.com

Éléments d'empilement CSS Flex les uns sur les autres

J'essaie de placer quelques <h1></h1> texte et un formulaire de courrier électronique de Angular Material, au centre d'un <div></div> section qui a un arrière-plan coloré. Les éléments sortent empilés les uns sur les autres, comme s'il s'agissait de couches. Le formulaire de courriel doit se trouver sous le <h1></h1> Mots clés. La seule façon de faire en sorte que cela s'aligne correctement était avec position:flex, dont je soupçonne la cause sous-jacente.

Voici mon html et css:

<div class="top-section">

  <h1 class="top-h1">
    mytitle
  </h1>

  <md-input-container class="email-form" color="accent">
    <input mdInput placeholder="Email us" value="Your email address">
  </md-input-container>

</div>


.top-section {
  height: 350px;
  background-color: #04041b;
  align-items: center;
  display: flex;
  justify-content: center;
}

.top-h1 {
  color: #E8E8E8;
  font-size: 60px;
  position: absolute;
}

.email-form {
  color: white;
  font-size: 30px;
}

Des pensées?

htmlcssangularflexboxangular-material
7
tilikoom

Vous utilisez position: absolute sur le h1 qui le supprime du flux de la page et le positionne par rapport au parent le plus proche. Donc, d'autres éléments ne couleront pas autour de lui. Retirez ça. Vos éléments s'afficheront alors côte à côte depuis la valeur par défaut flex-direction pour un parent flexible est row. Pour afficher les éléments verticalement, utilisez flex-direction: column et les éléments s'empileront les uns sur les autres dans une colonne au lieu d'être côte à côte dans une rangée.

.top-section {
  height: 350px;
  background-color: #04041b;
  align-items: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.top-h1 {
  color: #E8E8E8;
  font-size: 60px;
}

.email-form {
  color: white;
  font-size: 30px;
}
<div class="top-section">

  <h1 class="top-h1">
    mytitle
  </h1>

  <md-input-container class="email-form" color="accent">
    <input mdInput placeholder="Email us" value="Your email address">
  </md-input-container>

</div>
6
Michael Coker

J'imagine que cela est dû au fait que vous avez .top-h1 avec position réglé sur absolute.

Créez quelque chose comme ce qui suit et cela devrait régler votre problème:

<div class="container">
  <h1>Example</h1>
  <div class="form">
    <!-- ignore this div, this is an example of where your form will be. -->
  </div>
</div>

.container {
  height: 350px;
  background-color: #E0E0E0;
  width: 100%;
  margin: auto;
  text-align: center; 
}

.form {
  width: 100%;
  margin: auto;
}

Cela devrait faire ce que vous voulez. Si j'ai mal compris la question, veuillez répondre et je peux ajuster ma réponse, mais c'est ce que j'obtiens de votre part en voulant que les éléments ne soient pas empilés et que le formulaire soit situé sous le h1 mais reste centré.

Pour référence future, si vous avez besoin d'aligner un div, donnez-lui une largeur, puis utilisez margin: auto;

Bonne chance.

1
JamesTheHunt