Je cherche un moyen de centrer verticalement le div container
à l'intérieur du jumbotron
et de le placer au milieu de la page.
Le " jumbotron " doit être adapté à la hauteur et à la largeur totales de l'écran. La division .container
a une largeur de 1025px
et doit se trouver au milieu de la page (centrée verticalement).
Je veux que le jumbotron soit adapté à la hauteur et à la largeur de l'écran et que le conteneur soit centré verticalement par rapport au jumbotron. Comment puis-je y parvenir ?
.jumbotron {
height:100%;
width:100%;
}
.container {
width:1025px;
}
.jumbotron .container {
max-width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
<div class="container text-center">
<h1>The easiest and powerful way</h1>
<div class="row">
<div class="col-md-7">
<div class="top-bg"></div>
</div>
<div class="col-md-5 iPhone-features" style="margin-left:-25px;">
<ul class="top-features">
<li>
<span><i class="fa fa-random simple_bg top-features-bg"></i></span>
<p><strong>Redirect</strong><br>Visitors where they converts more.</p>
</li>
<li>
<span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>
<p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
</li>
<li>
<span><i class="fa fa-check simple_bg top-features-bg"></i></span>
<p><strong>Check</strong><br>Constantly the status of your links.</p>
</li>
<li>
<span><i class="fa fa-users simple_bg top-features-bg"></i></span>
<p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p>
</li>
<a href="pricing-and-signup.html" class="btn-primary btn h2 lightBlue get-Started-btn">GET STARTED</a>
<h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6>
</ul>
</div>
</div>
</div>
</div>
L'alignement vertical est désormais très simple grâce à l'utilisation de la [mise en forme par boîte flexible][1]. Aujourd'hui, cette méthode est prise en charge par un [large éventail][2] de navigateurs Web, à l'exception d'Internet Explorer 8 et 9. Par conséquent, nous devrons utiliser des astuces/[polyfills][3] ou des [approches différentes][4] pour IE8/9.
Dans ce qui suit, je vais vous montrer comment faire cela en seulement 3 lignes de texte (sans tenir compte de l'ancienne syntaxe flexbox).
**Remarque : il est préférable d'utiliser une classe supplémentaire plutôt que de modifier le fichier .jumbotron
pour obtenir l'alignement vertical. J'utiliserais par exemple le nom de classe vertical-center
.
[Exemple ici][5] (Un [miroir][6] sur jsbin).
<div class="jumbotron vertical-center"> <!--
^--- Added class -->
<div class="container">
...
</div>
</div>
.vertical-center {
min-height: 100%; /* Fallback for browsers do NOT support vh unit */
min-height: 100vh; /* These two lines are counted as one :-) */
display: flex;
align-items: center;
}
Notes importantes (Considérées dans la démo) :
Les valeurs pourcentage des propriétés height
ou min-height
sont relatives à la height
de l'élément parent, vous devez donc spécifier explicitement la height
du parent.
Préfixe du fournisseur / ancienne syntaxe flexbox omise dans l'extrait posté pour des raisons de brièveté, mais présente dans l'exemple en ligne.
Dans certains anciens navigateurs web tels que Firefox 9 (dans lequel j'ai testé), le conteneur flexbox - .vertical-center
dans ce cas - ne prendra pas l'espace disponible à l'intérieur du parent, donc nous devons spécifier la propriété width
comme : width : 100%
.
De même, dans certains navigateurs Web, comme indiqué ci-dessus, l'élément flex - .container
dans ce cas - peut ne pas apparaître au centre horizontalement. Il semble que la "marge" gauche/droite appliquée de "auto" n'ait aucun effet sur l'élément flexible.
Nous devons donc l'aligner par box-pack / justify-content
.
Pour plus de détails et/ou pour l'alignement vertical des colonnes, vous pouvez vous référer à la rubrique ci-dessous :
Il s'agit de l'ancienne réponse que j'ai écrite à l'époque où j'ai répondu à cette question. Cette méthode a été discutée [ici][7] et elle est censée fonctionner également dans Internet Explorer 8 et 9. Je vais l’expliquer en quelques mots :
Dans un flux en ligne, un élément de niveau en ligne peut être aligné verticalement au milieu par la déclaration [vertical-align : middle
][8]. Spécification du [W3C][9] :
middle Aligne le milieu vertical de la boîte sur la ligne de base de la boîte parente plus la moitié de la hauteur x de la boîte parente.
Dans les cas où le parent - l'élément .vertical-center
dans ce cas - a une hauteur
explicite, si par hasard nous pouvions avoir un élément enfant ayant exactement la même hauteur
que le parent, nous serions capables de déplacer la ligne de base du parent jusqu'au point médian de l'enfant pleine hauteur et, de façon surprenante, de faire en sorte que notre enfant de flux - le .container
- soit aligné au centre verticalement.
Ceci étant dit, nous pourrions créer un élément pleine hauteur à l'intérieur du .vertical-center
par des pseudo-éléments ::before
ou ::after
et également changer le type d'affichage par défaut de cet élément et de l'autre enfant, le .container
, en inline-block
.
Utilisez ensuite vertical-align : middle;
pour aligner verticalement les éléments en ligne.
Voilà, c'est fait :
<div class="jumbotron vertical-center">
<div class="container">
...
</div>
</div>
.vertical-center {
height:100%;
width:100%;
text-align: center; /* align the inline(-block) elements horizontally */
font: 0/0 a; /* remove the gap between inline(-block) elements */
}
.vertical-center:before { /* create a full-height inline block pseudo=element */
content: " ";
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
.vertical-center > .container {
max-width: 100%;
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
/* reset the font property */
font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
[DÉMO DE TRAVAIL][11].
De plus, pour éviter des problèmes inattendus sur des écrans très petits, vous pouvez réinitialiser la hauteur du pseudo-élément à auto
ou 0
ou changer son type display
à none
si nécessaire :
@media (max-width: 768px) {
.vertical-center:before {
height: auto;
/* Or */
display: none;
}
}
[MISE À JOUR DE LA DÉMO][12].
Et encore une chose :
S'il y a des sections footer
/header
autour du conteneur, il vaut mieux positionner ces éléments correctement (relative
, absolue
? à vous de voir.) et ajouter une valeur z-index
plus élevée (pour plus d'assurance) pour qu'ils soient toujours au dessus des autres.
[1] : http://www.w3.org/TR/css-flexbox-1/ [2] : http://caniuse.com/#feat=flexbox [3] : https://github.com/doctyper/flexie [4] : https://stackoverflow.com/questions/18516317/vertically-align-an-image-inside-a-div-with-responsive-height?lq=1 [5] :
[6] : http://jsbin.com/namogi/1/edit?css,output [7] : https://stackoverflow.com/questions/18516317/vertically-align-an-image-inside-a-div-with-responsive-height/18516474#18516474 [8] : https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align [9] : http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align[11] : http://jsbin.com/vuyub/4/edit [12] : http://jsbin.com/vuyub/5/edit
ajoutez Bootstrap.css puis ajoutez ceci à votre css
Voici le css
html, body{height:100%; margin:0;padding:0}
.container-fluid{
height:100%;
display:table;
width: 100%;
padding: 0;
}
.row-fluid {height: 100%; display:table-cell; vertical-align: middle;}
.centering {
float:none;
margin:0 auto;
}
Maintenant, appelez dans votre page
<div class="container-fluid">
<div class="row-fluid">
<div class="centering text-center">
Am in the Center Now :-)
</div>
</div>
</div>
Ma technique préférée :
body {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.jumbotron {
display: table-cell;
vertical-align: middle;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="jumbotron vertical-center">
<div class="container text-center">
<h1>The easiest and powerful way</h1>
<div class="row">
<div class="col-md-7">
<div class="top-bg">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="col-md-5 iPhone-features">
<ul class="top-features">
<li>
<span><i class="fa fa-random simple_bg top-features-bg"></i></span>
<p><strong>Redirect</strong><br>Visitors where they converts more.</p>
</li>
<li>
<span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>
<p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
</li>
<li>
<span><i class="fa fa-check simple_bg top-features-bg"></i></span>
<p><strong>Check</strong><br>Constantly the status of your links.</p>
</li>
<li>
<span><i class="fa fa-users simple_bg top-features-bg"></i></span>
<p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p>
</li>
<a href="pricing-and-signup.html" class="btn-primary btn h2 lightBlue get-Started-btn">GET STARTED</a>
<h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6>
</ul>
</div>
</div>
</div>
</div>
body {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.jumbotron {
display: table-cell;
vertical-align: middle;
}
Voir aussi [ce violon][1] !
[1] :