1
votes

Comment puis-je aligner verticalement des div dans une disposition de grille?

Pourquoi les divs dans une mise en page grid ne sont-ils pas alignés par défaut?

Comment puis-je les aligner?

<div class='dpNav' id='dpNav'>
<div class='yearTitle' id='yearTitle'>2019</div>
<div class='btnYear' id='btnYear'>&#x267B;</div>
<div></div>
<div class='monthTitle' id='monthTitle'>JAN</div>
<div class='btnMonth' id='btnMonth'>&#x267B;</div>
</div>

.dpNav{
width:50%;
display:grid;
grid-template-columns: repeat(5, 1fr);
text-align:center;
background:gold;
}

html css css-grid vertical-alignment

2 commentaires

a voté pour cela parce que vous avez inclus un extrait de code fonctionnel :) voulez-vous mettre chaque div au-dessus de l'autre verticalement?

@YvonneAburrow, non je veux la même marge supérieure et inférieure sur chaque enfant de la grille.

3 Réponses :

1
votes

ajoutez align-items:center;

<div class='dpNav' id='dpNav'>
<div class='yearTitle' id='yearTitle'>2019</div>
<div class='btnYear' id='btnYear'>&#x267B;</div>
<div></div>
<div class='monthTitle' id='monthTitle'>JAN</div>
<div class='btnMonth' id='btnMonth'>&#x267B;</div>
</div>

.dpNav{
width:50%;
display:grid;
grid-template-columns: repeat(5, 1fr);
text-align:center;
background:gold;
align-items:center;
}

1 commentaires

hmm ... la marge supérieure des symboles est un pixel ou deux en plus.

1
votes

<div class='dpNav' id='dpNav'>
<div class='yearTitle text' id='yearTitle'>2019</div>
<div class='btnYear' id='btnYear'>&#x267B;</div>
<div></div>
<div class='monthTitle text' id='monthTitle'>JAN</div>
<div class='btnMonth' id='btnMonth'>&#x267B;</div>
</div>

.dpNav{
width:50%;
display:grid;
grid-template-columns: repeat(5, 1fr);
text-align:center;
vertical-align: middle;
background:gold;
padding-bottom: 2px
}

.text {
 padding-top: 3px;
 }

si vous n'aimez pas mes ajustements au remplissage, vous pouvez également placer le contenu dans une plage et définir le CSS pour cela sur vertical-align: middle . p>

2 commentaires

Et quelqu'un pourrait-il expliquer - pourquoi la solution de Dogukan n'est pas parfaite - pourquoi j'ai besoin de padding et spans supplémentaires - pourquoi les divs ne sont pas alignés par défaut?

il semble que le paramètre par défaut consiste à aligner le texte vers le bas plutôt que vers le centre. Les icônes de recyclage ont une hauteur légèrement différente du texte.

2
votes

L'ajout de align-items: center sur le conteneur parent permettra d'obtenir ce que vous recherchez. La raison pour laquelle il n'est pas défini par défaut est de donner à l'utilisateur le contrôle de son emplacement. CSS-Tricks présente une analyse très détaillée des différents façons d'aligner des éléments dans une grille.

<div class='dpNav' id='dpNav'>
<div class='yearTitle' id='yearTitle'>2019</div>
<div class='btnYear' id='btnYear'>&#x267B;</div>
<div></div>
<div class='monthTitle' id='monthTitle'>JAN</div>
<div class='btnMonth' id='btnMonth'>&#x267B;</div>
</div>

.dpNav{
width:50%;
display:grid;
align-items:center;
grid-template-columns: repeat(5, 1fr);
text-align:center;
background:gold;
}

1 commentaires

merci pour l'excellent lien vers les astuces css