J'ai une "image de héros" remplissant la hauteur et la largeur de la fenêtre. À l'intérieur de ce div , il y a un en-tête. Je voudrais que le titre soit aligné verticalement de sorte que l'espace disponible soit un tiers au-dessus et deux tiers en dessous.
Par exemple: Image du héros = 1000 px de haut. H1 = 400 px de haut. Donc, l'espace au-dessus serait = 200px Espace en dessous = 400px
C'est une mise en page réactive, donc je ne connais pas la hauteur de l'image du héros ou du titre.
Le centrage vertical à l'aide de Flexbox est facile, mais j'ai besoin de plus espace ci-dessous. Quelqu'un peut-il me suggérer dans la bonne direction?
Voici mon code pour le moment. Veuillez noter que je n'ai jamais utilisé Flex auparavant, donc je ne sais pas vraiment ce que je fais.
.hero_image {
min-height:100vh;
background-color:yellow;
display: flex;
align-items: center;
justify-content: center;
}
.hero_image h1 {
font-size:72px;
padding-top:20px;
}
<div class="hero_image">
<h1>Heading <br>more text <br>last bit of text</h1>
</div>
Voici un lien vers l'exemple JSFiddle https://jsfiddle.net/yvf6tgh8/2/
3 Réponses :
Vous pouvez utiliser calc (33% - , mais vous devez connaître le headerHieght pour cela.
Vous pouvez essayer quelque chose comme ça :
<h1>The calc() Function</h1>
<div id = "container1">
text
<div id = "headingContainer">HEADING</div>
text 2
</div>
#container1 {
/*hieght : 100px;*/
border : 2px solid blue;
}
#headingContainer {
margin-top: 33%;
margin-bottom: 66%;
hieght : 40px;
border: 1px solid red;
}
Pour gérer la partie mise en page, j'utiliserais CSS Grid:
CSS Grid Layout excelle à diviser une page en régions principales ou à définir la relation en termes de taille, de position et de couche, entre les parties d'un contrôle construit à partir de primitives HTML.
Comme les tableaux, la disposition en grille permet à un auteur d'aligner des éléments dans des colonnes et des lignes. Cependant, beaucoup plus de mises en page sont possibles ou plus faciles avec la grille CSS qu'avec les tableaux. Par exemple, les éléments enfants d'un conteneur de grille pourraient se positionner de manière à se chevaucher et se superposer, comme les éléments positionnés en CSS.
<div class="hero_image">
<div></div>
<div class="content">
<h1>Heading <br>more text <br>last bit of text</h1>
</div>
<div></div>
</div>
.hero_image {
min-height: 100vh;
background-color: yellow;
display: grid;
grid-template-rows: 1fr auto 2fr; /* here is the fun */
}
.hero_image>.content {
width: 100%;
display: flex;
justify-content: center;
}
.hero_image h1 {
font-size: 72px;
padding-top: 20px;
}
/* just to show margin */
.hero_image>div:first-child,
.hero_image>div:last-child {
background: red;
}
body {
margin: 0;
}
Faites de votre hero_image une colonne flexbox avec des éléments psuedo :
flex: 1 à avant , et flex: 2 à après pour obtenir l'effet. Voir la démo ci-dessous:
<div class="hero_image"> <h1>Heading <br>more text <br>last bit of text</h1> </div>
.hero_image {
min-height: 100vh;
background-color: yellow;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column; /* ADDED */
}
.hero_image h1 {
font-size: 72px;
padding-top: 20px;
background: #fff; /* For Illustration */
}
body {
margin: 0;
}
.hero_image:after { /* ADDED */
flex: 2;
content: '';
}
.hero_image:before { /* ADDED */
flex: 1;
content: '';
}
Bonjour. Pouvez-vous partager votre code? ( exemple reproductible minimal )
nous ne pouvons pas vous aider sans vérifier votre code .. veuillez ajouter un extrait de code fonctionnel ou un lien jsfiddle. Merci
De plus, je pense qu'une image de la mise en page souhaitée serait utile. (faites-le avec de la peinture de n'importe quoi)
@ user2991837 Fournissez un exemple de code qui aidera à résoudre le problème ou Utilisez flexbox align-content: space-between;