Comment centrer verticalement un conteneur dans un Bootstrap Jumbotron ?

Alignement vertical d'un conteneur dans un Jumbotron dans Bootstrap

L'obtention de l'alignement vertical d'un conteneur dans un jumbotron dans Bootstrap peut être obtenue par différentes approches, en fonction du niveau de prise en charge du navigateur souhaitée.

La manière moderne

Utiliser Flexbox

Pour les navigateurs modernes prenant en charge Flexbox, une approche plus simple et cohérente consiste à utiliser le modèle de mise en page Flexbox. En ajoutant le CSS suivant à votre page :

.vertical-center {
  display: flex;
  align-items: center;
}

vous pouvez sans effort centrer verticalement le conteneur dans le jumbotron. Assurez-vous d'entourer le conteneur avec un div avec la classe ".vertical-center".

La méthode à l'ancienne

Pour les navigateurs plus anciens

Pour les navigateurs qui ne prennent pas en charge Flexbox , une technique Web standard impliquant un alignement vertical nécessite un peu plus d'effort. Utilisez la propriété text-align: center pour aligner les éléments enfants horizontalement au sein du parent. Créez un élément div initialement masqué par display: none avec une hauteur égale ou inférieure à celle du parent. Maintenant, manipulez l'alignement en utilisant vertical-align sur l'élément souhaité (comme le conteneur).

.vertical-center {
  text-align: center;
  font: 0/0 a;
}

.vertical-center .hidden-child {
  display: none;
  height: 100%;
}

.vertical-center.aligned .hidden-child {
  display: inline-block;
  vertical-align: middle;
}

Dans le conteneur, ajoutez un display: inline-block; propriété avec vertical-align: middle; pour réaliser un centrage vertical. Notez que cela implique un balisage supplémentaire pour imiter l'effet de Flexbox.

Considérations relatives au navigateur

N'oubliez pas qu'Internet Explorer 8 et 9 n'interpréteront pas correctement la technique du bloc en ligne, ce qui nécessitera des solutions alternatives.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!