La propriété vertical-align est utilisé pour centrer verticalement des éléments en ligne. Les valeurs pour vertical-align aligne l’élément relativement à son élément parent: Les valeurs qui sont relatives à ligne, aligne verticalement l’élément relativement à la ligne entière..
Le centrage vertical est un aspect essentiel de la conception Web. Il s’agit d’aligner verticalement les éléments au milieu d’un conteneur. Il existe plusieurs façons de réaliser le centrage vertical en HTML et CSS, en fonction du type d’élément avec lequel vous travaillez. Cet article présente quelques-unes des techniques les plus courantes de centrage vertical en CSS et en HTML.
Pour aligner des éléments verticalement en CSS, vous pouvez utiliser la disposition Flexbox ou la disposition Grid. Ces deux méthodes sont les plus populaires pour obtenir un centrage vertical en CSS.
La mise en page Flexbox utilise deux propriétés de conteneur pour réaliser le centrage vertical : display : flex et align-items : center. La propriété display : flex transforme le conteneur en conteneur flex, tandis que la propriété align-items : center centre les éléments enfants verticalement.
Voici un exemple d’utilisation de la disposition Flexbox pour centrer une image verticalement :
« `
.container {
display : flex ;
align-items : center ;
justify-content : center ;
height : 100vh ;
}
img {
height : 50% ;
width : auto ;
}
« `
La disposition en grille utilise la propriété align-items : center pour centrer verticalement les éléments enfants. La disposition en grille est idéale pour aligner plusieurs éléments verticalement dans un conteneur.
Voici un exemple d’utilisation de la disposition Grid pour centrer plusieurs éléments verticalement :
« `
.container {
display : grid ;
grid-template-columns : repeat(3, 1fr) ;
grid-template-rows : repeat(3, 1fr) ;
align-items : center ;
justify-content : center ;
height : 100vh ;
}
.item {
background-color : #ccc ;
}
« `
En HTML, vous pouvez utiliser la propriété vertical-align pour aligner les éléments verticalement. La propriété vertical-align est utilisée pour aligner verticalement les éléments inline et table-cell.
« `
Centered Text
« `
To center an image vertically in CSS, you can use the Flexbox layout or the Grid layout. Here is an example of using the Flexbox layout to center an image vertically:
« `
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
img {
height: 50%;
width: auto;
}
« `
To align HTML elements, you can use the text-align property for inline elements and margin:auto for block elements. Here is an example of using the text-align property to center an inline element:
« `
Centered Text
« `
To center a div, you can use the margin property. Set the margin property to auto for both the left and right sides. Here is an example of centering a div:
« `
.container {
width: 50%;
margin: 0 auto;
}
« `
In conclusion, vertical centering is an essential aspect of web design. There are various ways of achieving vertical centering in HTML and CSS, depending on the type of element you are working with. The Flexbox layout and the Grid layout are the most popular ways of achieving vertical centering in CSS. In HTML, you can use the vertical-align property to align elements vertically. The text-align property and margin:auto are also useful for aligning HTML elements.