Alignement de la hauteur HTML. Alignement vertical en div. Bonus : commentaires conditionnels

Lors de la création d'une mise en page Web, vous avez probablement rencontré une situation dans laquelle vous devez centrer un div horizontalement et verticalement à l'aide de CSS. Il existe plusieurs façons d'utiliser CSS et JQuery.

Mais d'abord les bases :

Alignement horizontal à l'aide de CSS

Nom de classe (
marge : 0 automatique ;
largeur : 200 px ;
hauteur : 200 px ;
}

Pour centrer un div uniquement horizontalement, vous devez spécifier une largeur et une valeur automatique pour les marges gauche et droite (il s'agit d'un raccourci pour écrire des propriétés CSS). Cette méthode fonctionne sur des éléments de bloc (div, p, h1, etc.). Pour l'appliquer aux éléments linéaires (tels que les hyperliens et les images), vous devez écrire une autre règle : display:block .

Alignement horizontal et vertical à l'aide de CSS

Centrer un div horizontalement et verticalement en même temps est un peu plus délicat. Vous devez connaître les tailles des div à l'avance.

Nom de classe (
largeur : 300 px ;
hauteur : 200 px ;
position : absolue ;
gauche : 50 % ;
haut : 50 % ;
marge : -100px 0 0 -150px ;
}

En utilisant le positionnement absolu des éléments, nous pouvons le sortir du flux et définir sa position par rapport à la fenêtre du navigateur. En définissant le décalage du div à 50 % par rapport à la gauche et au haut de la fenêtre, nous centrons le coin supérieur gauche par rapport à la page. Il ne reste plus qu'à déplacer le div vers la gauche et vers le haut de la moitié de sa largeur et de sa hauteur, en définissant des valeurs de marge négatives pour qu'il soit parfaitement centré.

Alignement horizontal et vertical avec jQuery

Comme déjà dit, la méthode CSS ci-dessus ne fonctionne qu'avec des div de taille fixe. JQuery vient à la rescousse :

// déclaration de fonction :
$(window).resize(function())(
$(".nom-classe").css((
position : "absolu",
gauche : ($(window).width() - $(".class-name").outerWidth())/2,
haut : ($(window).height() - $(".class-name").outerHeight())/2
});
});
// appel de fonction :
$(window).resize();

La fonction calcule la largeur de la fenêtre en $(window).resize() chaque fois que l'utilisateur redimensionne la fenêtre. Nous utilisons externalWidth() et externalHeight() car, contrairement aux width() et height() classiques, ils ajoutent du remplissage et de la largeur de bordure, renvoyant la taille. Enfin, nous nous adaptons lorsque la fenêtre est redimensionnée et centrons le div lorsque la page est rechargée.

Lors de la création de blocs div, vous avez probablement rencontré des situations dans lesquelles vous devez centrer votre div horizontalement et verticalement en utilisant du CSS pur. Par exemple, lors de la création de fenêtres contextuelles avec . Il existe plusieurs façons d'implémenter le centrage, et dans cet article, je partagerai mes méthodes préférées et les plus simples, en utilisant CSS ou jQuery.

Tout d'abord, les bases :

Centrage horizontal en CSS

C'est facile à faire, nous utilisons marge pour notre div bloc.

Nom de classe (marge:0 auto; largeur:200px; hauteur:200px; )

Pour centrer un bloc div uniquement horizontalement, vous devez définir la largeur du bloc (width), utiliser la propriété auto pour les marges gauche et droite. Cette méthode fonctionnera pour tous les éléments de bloc (div, p, h1, etc.). Pour appliquer un centrage horizontal aux éléments en ligne (liens, images...), vous devez appliquer le display: block;

Centrage horizontal et vertical en CSS

Centrer un bloc div horizontalement et verticalement en même temps est un peu plus délicat. Vous devez connaître les dimensions du bloc div à l’avance.

Nom de classe (largeur : 300 px ; hauteur : 200 px ; position : absolue ; gauche : 50 % ; haut : 50 % ; marge : -100px 0 0 -150px ; )

En utilisant le positionnement absolu d'un bloc, on peut le détacher des éléments environnants et déterminer sa position par rapport à la taille de la fenêtre du navigateur. Déplacez le bloc div de 50 % vers la gauche et en haut de la fenêtre. Le coin supérieur gauche du bloc se trouve désormais au centre de la fenêtre du navigateur. Il ne reste plus qu'à placer le bloc div au centre de la page en le déplaçant de la moitié de sa largeur vers la gauche et de la moitié de sa hauteur vers le haut. Hourra! Le résultat était un excellent centrage des blocs utilisant du code CSS pur.

Centrage horizontal et vertical avec jQuery

Comme mentionné précédemment, la méthode de centrage CSS ne fonctionne qu'avec des dimensions fixes. Si les dimensions ne sont pas définies, la méthode jQuery viendra à la rescousse :

$(window).resize(function())( $(".className").css(( position:"absolute", gauche : ($(window).width() - $(".className").outerWidth ( ))/2, en haut : ($(window).height() - $(".className").outerHeight())/2 )); // Pour exécuter une fonction lorsque la fenêtre est chargée : $(window).resize();

Le fonctionnement de cette méthode consiste à exécuter la fonction resize() en utilisant la ligne $(window).resize() . Cette fonction fonctionne chaque fois que la fenêtre du navigateur est redimensionnée. Nous utilisons externalWidth() et externalHeight() car, contrairement à width() et height() , ils incluent le remplissage et l'épaisseur des bordures dans la taille qu'ils renvoient. La dernière ligne démarre le processus de centrage du bloc div lors du chargement de la page.

L’avantage d’utiliser cette méthode est que vous ne savez peut-être pas quelle est la taille du div. Le principal inconvénient est que cela ne fonctionne que lorsque JavaScript est activé. Par conséquent, cette méthode est acceptable pour les interfaces multifonctionnelles telles que VKontakte, Facebook, etc.

Comme toujours, n'hésitez pas à suggérer votre méthode préférée pour centrer les blocs en commentant.

Centrer des éléments verticalement à l'aide de CSS est une tâche qui présente certaines difficultés pour les développeurs. Cependant, il existe plusieurs méthodes pour le résoudre, qui sont assez simples. Cette leçon présente 6 options pour centrer verticalement le contenu.

Commençons par une description générale du problème.

Problème de centrage vertical

Le centrage horizontal est très simple et facile. Lorsque l'élément centré est en ligne, nous utilisons la propriété d'alignement par rapport à l'élément parent. Lorsque l'élément est au niveau du bloc, nous définissons sa largeur et le réglage automatique des marges gauche et droite.

La plupart des gens, lorsqu'ils utilisent la propriété text-align:, se réfèrent à la propriété vertical-align pour le centrage vertical. Tout semble assez logique. Si vous avez utilisé des modèles de tableaux, vous avez probablement largement utilisé l'attribut valign, qui renforce la conviction que l'alignement vertical est la bonne façon de résoudre le problème.

Mais l'attribut valign ne fonctionne que sur les cellules du tableau. Et la propriété d’alignement vertical lui est très similaire. Cela affecte également les cellules du tableau et certains éléments en ligne.

La valeur de la propriété vertical-align est relative à l'élément en ligne parent.

• Dans une ligne de texte, l'alignement se fait par rapport à la hauteur de la ligne.
• La cellule du tableau utilise un alignement par rapport à une valeur calculée par un algorithme spécial (généralement la hauteur de la ligne).

Mais malheureusement, la propriété vertical-align ne fonctionne pas sur les éléments de niveau bloc (par exemple, les paragraphes à l'intérieur d'un élément div). Cette situation peut laisser penser qu’il n’existe pas de solution au problème de l’alignement vertical.

Mais il existe d'autres méthodes de centrage des éléments de bloc, dont le choix dépend de ce qui est centré par rapport au conteneur extérieur.

Méthode de hauteur de ligne

Cette méthode fonctionne lorsque vous souhaitez centrer verticalement une ligne de texte. Tout ce que vous avez à faire est de définir la hauteur de ligne pour qu’elle soit supérieure à la taille de la police.

Par défaut, l'espace blanc sera réparti uniformément en haut et en bas du texte. Et la ligne sera centrée verticalement. Souvent, la hauteur de la ligne est égale à la hauteur de l'élément.

HTML :

Texte requis

CSS :

#enfant ( hauteur de ligne : 200px ; )

Cette méthode fonctionne dans tous les navigateurs, même si elle ne peut être utilisée que pour une seule ligne. La valeur 200 px dans l'exemple a été choisie arbitrairement. Vous pouvez utiliser n'importe quelle valeur supérieure à la taille de la police du texte.

Centrer une image à l'aide de la hauteur de ligne

Et si le contenu était une image ? La méthode ci-dessus fonctionnera-t-elle ? La réponse réside dans une ligne supplémentaire de code CSS.

HTML :

CSS :

#parent (hauteur de ligne : 200 px ; ) #parent img ( alignement vertical : milieu ; )

La valeur de la propriété line-height doit être supérieure à la hauteur de l'image.

Méthode de table CSS

Il a été mentionné ci-dessus que la propriété vertical-align est utilisée pour les cellules de tableau, où elle fonctionne très bien. Nous pouvons afficher notre élément sous forme de cellule de tableau et utiliser la propriété vertical-align pour centrer verticalement le contenu.

Remarque : Un tableau CSS n'est pas la même chose qu'un tableau HTML.

HTML :

Contenu

CSS :

#parent (affichage : tableau ;) #enfant ( affichage : cellule-tableau ; alignement vertical : milieu ; )

Nous définissons la sortie du tableau sur l'élément div parent et générons l'élément div imbriqué sous forme de cellule de tableau. Vous pouvez désormais utiliser la propriété vertical-align sur le conteneur interne. Tout ce qu'il contient sera centré verticalement.

Contrairement à la méthode ci-dessus, dans ce cas le contenu peut être dynamique puisque l’élément div changera de taille en fonction de son contenu.

L’inconvénient de cette méthode est qu’elle ne fonctionne pas dans les anciennes versions d’IE. Vous devez utiliser la propriété display: inline-block pour le conteneur imbriqué.

Positionnement absolu et marges négatives

Cette méthode fonctionne également dans tous les navigateurs. Mais cela nécessite que l'élément centré ait une hauteur.

L'exemple de code effectue un centrage horizontal et vertical en même temps :

HTML :

Contenu

CSS :

#parent (position : relative ;) #enfant ( position : absolue ; haut : 50 % ; gauche : 50 % ; hauteur : 30 % ; largeur : 50 % ; marge : -15 % 0 0 -25 % ; )

Tout d’abord, nous définissons le type de positionnement de l’élément. Ensuite, nous définissons les propriétés haut et gauche de l'élément div imbriqué à 50 %, ce qui correspond au centre de l'élément parent. Mais le centre est le coin supérieur gauche de l'élément imbriqué. Par conséquent, vous devez le soulever (la moitié de la hauteur) et le déplacer vers la gauche (la moitié de la largeur), puis le centre coïncidera avec le centre de l'élément parent. Il est donc nécessaire de connaître la hauteur de l’élément dans ce cas. Ensuite, nous définissons l'élément avec des marges négatives supérieure et gauche égales respectivement à la moitié de la hauteur et de la largeur.

Cette méthode ne fonctionne pas dans tous les navigateurs.

Positionnement absolu et étirements

L'exemple de code effectue un centrage vertical et horizontal.

HTML :

Contenu

CSS :

#parent (position : relative ;) #child ( position : absolue ; haut : 0 ; bas : 0 ; gauche : 0 ; droite : 0 ; largeur : 50 % ; hauteur : 30 % ; marge : auto ; )

L'idée derrière cette méthode est d'étendre l'élément imbriqué jusqu'aux 4 bordures de l'élément parent en définissant les propriétés top, bottom, right et left sur 0.

Définir les marges pour qu'elles soient générées automatiquement de tous les côtés définira des valeurs égales sur les 4 côtés et centrera notre élément div imbriqué sur son élément parent.

Malheureusement, cette méthode ne fonctionne pas dans IE7 et versions antérieures.

Espaces égaux au-dessus et en dessous

Dans cette méthode, un remplissage égal est explicitement défini au-dessus et en dessous de l'élément parent.

HTML :

Contenu

CSS :

#parent ( remplissage : 5% 0; ) #enfant ( remplissage : 10% 0; )

L'exemple de code CSS définit le remplissage supérieur et inférieur pour les deux éléments. Pour un élément imbriqué, la définition du remplissage servira à le centrer verticalement. Et le remplissage de l'élément parent centrera l'élément imbriqué à l'intérieur.

Les unités de mesure relatives sont utilisées pour redimensionner dynamiquement les éléments. Et pour les unités de mesure absolues, vous devrez faire des calculs.

Par exemple, si l'élément parent a une hauteur de 400 px et que l'élément imbriqué mesure 100 px, alors 150 px de remplissage sont nécessaires en haut et en bas.

150 + 150 + 100 = 400

L'utilisation de % permet de laisser les calculs au navigateur.

Cette méthode fonctionne partout. L'inconvénient est la nécessité de calculs.

Remarque : Cette méthode fonctionne en définissant le remplissage externe de l'élément. Vous pouvez également utiliser des marges dans un élément. La décision d'utiliser des marges ou du remplissage doit être prise en fonction des spécificités du projet.

division flottante

Cette méthode utilise un élément div vide qui flotte et permet de contrôler la position de notre élément imbriqué dans le document. Notez que le div flottant est placé avant notre élément imbriqué dans le code HTML.

HTML :

Contenu

CSS :

#parent (hauteur : 250 px ;) #floater ( float : gauche ; hauteur : 50 % ; largeur : 100 % ; marge inférieure : -50 px ; ) #child ( clair : les deux ; hauteur : 100 px ; )

Nous décalons le div vide vers la gauche ou la droite et définissons sa hauteur à 50 % de son élément parent. De cette façon, il remplira la moitié supérieure de l'élément parent.

Étant donné que ce div est flottant, il est supprimé du flux normal du document et nous devons déballer le texte sur l'élément imbriqué. L'exemple utilise clear: Both , mais il suffit amplement d'utiliser la même direction que le décalage de l'élément div vide flottant.

La bordure supérieure d'un élément div imbriqué se trouve directement en dessous de la bordure inférieure d'un élément div vide. Nous devons déplacer l'élément imbriqué vers le haut de la moitié de la hauteur de l'élément vide flottant. Pour résoudre le problème, utilisez une valeur de propriété margin-bottom négative pour un élément div vide flottant.

Cette méthode fonctionne également dans tous les navigateurs. Cependant, son utilisation nécessite un élément div vide supplémentaire et la connaissance de la hauteur de l'élément imbriqué.

Conclusion

Toutes les méthodes décrites sont faciles à utiliser. La difficulté est qu’aucune d’entre elles ne convient à tous les cas. Vous devez analyser le projet et choisir celui qui correspond le mieux aux exigences.

Très souvent, dans la mise en page, il est nécessaire de centrer certains éléments horizontalement et/ou verticalement. J'ai donc décidé de faire un article avec différentes manières de centrer afin que tout soit à portée de main au même endroit.

Marge d'alignement horizontal : auto

L'alignement horizontal utilisant la marge est utilisé lorsque la largeur de l'élément centré est connue. Fonctionne pour les éléments de bloc :

Elem ( marge gauche : auto ; marge droite : auto ; largeur : 50 % ; )

Spécifier auto pour les marges droite et gauche les rend égales, ce qui centre l'élément horizontalement dans le bloc parent.

alignement du texte : centre

Cette méthode convient pour centrer du texte dans un bloc. aligner le texte : centrer :

Alignement avec text-align .wrapper ( text-align: center; )

Je suis aligné au centre

position et marge négative à gauche

Convient pour centrer des blocs de largeur connue. On donne au bloc parent position : relative à la position par rapport à lui, la position de l'élément centré : absolue , gauche : 50% et une marge-gauche négative dont la valeur est égale à la moitié de la largeur de l'élément :

Alignement avec la position .wrapper ( position : relative ; ) .wrapper p ( gauche : 50 % ; marge : 0 0 0 -100px ; position : absolue ; largeur : 200px ; )

Je suis aligné au centre

affichage : bloc en ligne + alignement du texte : centre

La méthode convient pour aligner des blocs de largeur inconnue, mais nécessite un parent wrapper. Par exemple, vous pouvez centrer un menu horizontal de cette façon :

Alignement avec l'affichage : inline-block + text-align : center ;

• .navigation ( text-align: center; ) .navigation li ( display: inline-block; )
• Maison

À propos de l'auteur

Hauteur de ligne d'alignement vertical

Pour aligner une ligne de texte, vous pouvez utiliser les mêmes valeurs de hauteur et d'espacement des lignes pour le bloc parent. Convient aux boutons, éléments de menu, etc.

hauteur de ligne .wrapper ( hauteur : 100px ; hauteur de ligne : 100px ; )

je suis aligné verticalement

position et marge négative en hausse

Un élément peut être aligné verticalement en lui donnant une hauteur fixe et en appliquant une position : absolue et une marge négative égale à la moitié de la hauteur de l'élément à aligner. Le bloc parent doit recevoir la position : relative :

Wrapper ( position : relative ; ) elem ( hauteur : 200 px ; marge : -100 px 0 0 ; position : absolue ; haut : 50 % ; )

De cette façon, grâce au positionnement et aux marges négatives, vous pouvez centrer un élément sur la page.

affichage : tableau-cellule

Pour l'alignement vertical, la propriété display: table-cell est appliquée à l'élément, ce qui l'oblige à émuler une cellule de tableau. Nous définissons également sa hauteur et vertical-align: middle . Enveloppons tout cela dans un conteneur avec la propriété dislpay: table; :

hauteur de ligne .wrapper ( hauteur : 100px ; hauteur de ligne : 100px ; )

Affichage d'alignement vertical : tableau-cellule .wrapper ( affichage : tableau ; largeur : 100 % ; ) .cell ( affichage : tableau-cellule ; hauteur : 100 px ; alignement vertical : milieu ; )

Alignement dynamique d'un élément sur une page

Nous avons étudié les moyens d'aligner les éléments sur une page à l'aide de CSS. Jetons maintenant un œil à l'implémentation de jQuery.

Connectons jQuery à la page :

Je suggère d'écrire une fonction simple pour centrer un élément sur la page, appelons-la alignCenter() . L'élément lui-même agit comme un argument de la fonction :

Fonction alignCenter(elem) ( // code ici )

Fonction alignCenter(elem) ( elem.css(( gauche : ($(window).width() - elem.width()) / 2 + "px", haut : ($(window).height() - elem. height()) / 2 + "px" // n'oubliez pas d'ajouter position: Absolute à l'élément pour déclencher les coordonnées )) )

Dans la première ligne de la fonction, nous obtenons la largeur du document et soustrayons la largeur de l'élément, divisée en deux - ce sera le centre horizontal de la page. La deuxième ligne fait la même chose, uniquement avec la hauteur pour l'alignement vertical.

La fonction est prête, il ne reste plus qu'à l'attacher aux événements de préparation du DOM et de redimensionnement de la fenêtre :

$(function() ( // appelle la fonction de centrage lorsque le DOM est prêt alignCenter($(elem)); // appelle la fonction lors du redimensionnement de la fenêtre $(window).resize(function() ( alignCenter($(elem )); )) // fonction de centrage d'élément function alignCenter(elem) ( elem.css(( // calcul des coordonnées gauche et supérieure gauche : ($(window).width() - elem.width()) / 2 + " px", en haut : ($(window).height() - elem.height()) / 2 + "px" )) ) ))

Application de Flexbox

Les nouvelles fonctionnalités CSS3, comme Flexbox, deviennent progressivement monnaie courante. La technologie permet de créer un balisage sans utiliser de flotteurs, de positionnement, etc. Il peut également être utilisé pour centrer des éléments. Par exemple, appliquez Flexbox à l'élément parent.wrapper et centrez le contenu à l'intérieur :

Wrapper ( affichage : -webkit-box ; affichage : -moz-box ; affichage : -ms-flexbox ; affichage : -webkit-flex ; affichage : flex ; hauteur : 500px ; largeur : 500px ; ) .wrapper .content ( marge : auto; /* marge : 0 auto ; horizontale uniquement */ /* marge : verticale uniquement */ ) Lorem ipsum dolor sit amet

Cette règle centre l'élément simultanément horizontalement et verticalement - la marge fonctionne désormais non seulement pour l'alignement horizontal, mais également pour l'alignement vertical. Et sans largeur/hauteur connue.

Ressources connexes Aidez le projet

Il existe plusieurs manières fondamentalement différentes de centrer verticalement un objet à l’aide de CSS, mais choisir la bonne peut s’avérer délicat. Nous examinerons certains d'entre eux et créerons également un petit site Web en utilisant les connaissances acquises.

L'alignement vertical au centre n'est pas facile à réaliser avec CSS. Il existe de nombreuses méthodes et toutes ne fonctionnent pas dans tous les navigateurs. Examinons 5 méthodes différentes ainsi que les avantages et les inconvénients de chacune. Exemple.

1ère méthode

Cette méthode suppose que nous définissons un élément à afficher sous forme de tableau, puis que nous pouvons utiliser la propriété vertical-align dessus (qui fonctionne différemment selon les éléments).

Quelques informations utiles qui devraient être situées de manière centralisée.

#wrapper( display: table; ) #cell( display: table-cell; vertical-align: middle; )

• Avantages
• Le contenu peut changer de hauteur de manière dynamique (la hauteur n'est pas définie en CSS).

Le contenu n’est pas coupé s’il n’y a pas suffisamment d’espace pour le diffuser.

• Inconvénients
• Ne fonctionne pas dans IE 7 ou version antérieure

Beaucoup de balises imbriquées

2ème méthode

Cette méthode utilise le positionnement absolu du div, avec top défini à 50 % et margin-top moins la moitié de la hauteur du contenu. Cela implique que l'objet doit avoir une hauteur fixe, définie dans les styles CSS.

Puisque la hauteur est fixe, vous pouvez définir overflow:auto; pour un div contenant du contenu, ainsi, si le contenu ne rentre pas, des barres de défilement apparaîtront.

#wrapper( display: table; ) #cell( display: table-cell; vertical-align: middle; )

• Contenu ici #content ( position : absolue ; haut : 50 % ; hauteur : 240 px ; marge supérieure : -120 px ; /* moins la moitié de la hauteur */ )
• Fonctionne dans tous les navigateurs.

Le contenu n’est pas coupé s’il n’y a pas suffisamment d’espace pour le diffuser.

• Il n’y a pas d’imbrication inutile.

Lorsqu'il n'y a pas assez d'espace, le contenu disparaît (par exemple, le div est à l'intérieur du corps et l'utilisateur a réduit la taille des fenêtres, auquel cas les barres de défilement n'apparaîtront pas.

3ème méthode

Dans cette méthode, nous envelopperons le contenu div avec un autre div. Fixons sa hauteur à 50 % (hauteur : 50 % ;) et la marge inférieure à la moitié de la hauteur (margin-bottom :-contentheight ;). Le contenu sera effacé et centré.

#wrapper( display: table; ) #cell( display: table-cell; vertical-align: middle; )

• Contenu ici #content ( position : absolue ; haut : 50 % ; hauteur : 240 px ; marge supérieure : -120 px ; /* moins la moitié de la hauteur */ )
• voici le contenu #floater( float: left; height: 50%; margin-bottom: -120px; ) #content( clear: two; height: 240px; position: relative; )

Le contenu n’est pas coupé s’il n’y a pas suffisamment d’espace pour le diffuser.

• Lorsqu'il n'y a pas assez d'espace (par exemple lorsque la fenêtre est réduite), le contenu n'est pas recadré, des barres de défilement apparaîtront.

Je ne peux penser qu'à une chose : qu'un élément vide supplémentaire est utilisé.

4ème méthode.

Cette méthode utilise la propriété position:absolute; pour un div aux dimensions fixes (largeur et hauteur). Ensuite, nous définissons ses coordonnées top:0; bas : 0 ; , mais comme il a une hauteur fixe, il ne peut pas s'étirer et est aligné au centre. Ceci est très similaire à la méthode bien connue de centrage horizontal d'un élément de bloc de largeur fixe (marge : 0 auto ;).

#wrapper( display: table; ) #cell( display: table-cell; vertical-align: middle; )

• Informations importantes.

Le contenu n’est pas coupé s’il n’y a pas suffisamment d’espace pour le diffuser.

• #content( position : absolue ; haut : 0 ; bas : 0 ; gauche : 0 ; droite : 0 ; marge : auto ; hauteur : 240px ; largeur : 70 % ; )
• Le contenu sera coupé sans barres de défilement s'il n'y a pas assez d'espace dans le conteneur.

5ème méthode

En utilisant cette méthode, vous pouvez centrer une ligne de texte. Nous définissons simplement la hauteur du texte (line-height) égale à la hauteur de l'élément (height). Après cela, la ligne sera affichée au centre.

Une ligne de texte #content( height: 100px; line-height: 100px; )

#wrapper( display: table; ) #cell( display: table-cell; vertical-align: middle; )

• Contenu ici #content ( position : absolue ; haut : 50 % ; hauteur : 240 px ; marge supérieure : -120 px ; /* moins la moitié de la hauteur */ )
• Ne coupe pas le texte s'il ne rentre pas.

Le contenu n’est pas coupé s’il n’y a pas suffisamment d’espace pour le diffuser.

• Fonctionne uniquement avec du texte (ne fonctionne pas avec des éléments de bloc).
• S’il y a plus d’une ligne de texte, cela semble très mauvais.

Cette méthode est très utile pour les petits éléments, comme centrer du texte dans un bouton ou un champ de texte.

Maintenant que vous savez comment réaliser un alignement vertical au centre, créons un site Web simple qui ressemblera à ceci :

Étape 1

Il est toujours bon de commencer par un balisage sémantique. Notre page sera structurée comme suit :

• #floater (pour centrer le contenu)
• #centred (élément central)
  • #côté
    • #logo
    • #nav (liste
    • #contenu
  • #bottom (pour les droits d'auteur et tout ça)

  Écrivons le balisage html suivant :

  Une entreprise centrée Une entreprise

  • Maison
  • Produits
  • Blogue
  • Contact
  • À propos
  Titre de la page

  Repensez de manière globale l’externalisation à valeur ajoutée après une collaboration centrée sur les processus et le partage d’idées.

  Simplifiez énergiquement les marchés de niche à impact grâce à des impératifs activés. Prédominer de manière holistique l’innovation haut de gamme après des scénarios convaincants. Récapitulez en toute transparence des normes élevées en matière de capital humain avec des produits manufacturés de pointe. Syndiquez de manière distinctive les schémas conformes aux normes avant des vortals robustes. Récapitulez de manière unique la préparation au Web par rapport aux informations prêtes à l'emploi.

  Titre 2

  Adoptez efficacement une préparation Web personnalisée plutôt que des processus dirigés par le client. Développez avec assurance les impératifs multiplateformes par rapport aux technologies proactives. Renforcez facilement les métaservices multidisciplinaires sans interfaces à l’échelle de l’entreprise.

  Rationalisez facilement les domaines thématiques stratégiques compétitifs avec des marchés électroniques ciblés. Syndiquer par phosphofluorescence des communautés de classe mondiale vis-à-vis des marchés à valeur ajoutée. Réinventez de manière appropriée les services holistiques avant les services électroniques robustes.

  L'avis de droit d'auteur va ici

  Html, corps ( marge : 0 ; remplissage : 0 ; hauteur : 100 % ; ) corps ( arrière-plan : url("page_bg.jpg") 50 % 50 % sans répétition #FC3 ; famille de polices : Géorgie, Times, empattements ; ) #floater ( position : relative ; float : gauche ; hauteur : 50 % ; marge inférieure : -200 px ; largeur : 1 px ; ) #centered ( position : relative ; clair : gauche ; hauteur : 400 px ; largeur : 80 % ; max -width : 800px ; min-width : 400px ; margin : 0 auto ; border : 4px solid #666 ; ) #bottom ( position : absolue ; bas : 0 ; droite : 0 ; ) #nav ( position : absolue ; gauche : 0 ; bas : 0 ; remplissage : 20 px ; fond : 0 ;

  Avant d'aligner notre centre de contenu, nous devons définir la hauteur du corps et du code HTML à 100 %. Puisque la hauteur est calculée sans remplissage interne et externe (remplissage et marge), nous les définissons (remplissage) à 0 afin qu'il n'y ait pas de barres de défilement.

  La marge inférieure d'un élément "floater" est égale à moins la moitié de la hauteur du contenu (400px), soit -200px ;

  Votre page devrait maintenant ressembler à ceci :

  

  #largeur de l'élément centré 80%. Cela rend notre site plus étroit sur les petits écrans et plus large sur les plus grands. la plupart des sites semblent obscènes sur les nouveaux écrans larges situés dans le coin supérieur gauche. Les propriétés min-width et max-width limitent également notre page afin qu'elle ne paraisse ni trop large ni trop étroite. Internet Explorer ne prend pas en charge ces propriétés. Vous devez le définir sur une largeur fixe.

  Puisque l'élément #centered a position:relative défini, nous pouvons utiliser le positionnement absolu des éléments qu'il contient. Ensuite, définissez overflow:auto; pour l'élément #content, afin que des barres de défilement apparaissent si le contenu ne rentre pas.

  Étape 3

  La dernière chose que nous ferons est d'ajouter du style pour rendre la page un peu plus attrayante. Commençons par le menu.

  #nav ul ( style de liste : aucun ; remplissage : 0 ; marge : 20px 0 0 0 ; retrait de texte : 0 ; ) #nav li ( remplissage : 0 ; marge : 3px ; ) #nav li a ( affichage : bloc ; couleur d'arrière-plan : #e8e8e8 ; marge : 0 ; bordure inférieure : 1px solide : droite ; contenu : "" ; poids de la police : gras ; flottant : droite ; marge : 0 2px 0 5px ; f8f8f8 ; couleur de la bordure inférieure : #777; ) #nav li a:hover::after ( marge : 0 0 0 7px ; couleur : #f93 ; ) #nav li a:active ( remplissage : 8px 7px 6px 7px; )

  La première chose que nous avons faite pour améliorer l'apparence du menu a été de supprimer les puces en définissant l'attribut list-style:none, ainsi que de définir le remplissage et le remplissage, car ils varient considérablement par défaut selon les navigateurs.

  Notez que nous avons ensuite précisé que les liens doivent être rendus sous forme d'éléments de bloc. Désormais, lorsqu'ils sont affichés, ils sont étirés sur toute la largeur de l'élément dans lequel ils se trouvent.

  Une autre chose intéressante que nous avons utilisée pour le menu sont les pseudo-classes : avant et : après. Ils vous permettent d'ajouter quelque chose avant et après un élément. C'est un bon moyen d'ajouter des icônes ou des symboles, comme une flèche à la fin de chaque lien. Cette astuce ne fonctionne pas dans Internet Explorer 7 et versions antérieures.

  

  Étape 4

  Et enfin, nous ajouterons quelques vis à notre conception pour encore plus de beauté.

  #centered ( -webkit-border-radius : 8px; -moz-border-radius : 8px; border-radius : 8px; ) h1, h2, h3, h4, h5, h6 (famille de polices : Helvetica, Arial, sans- serif ; poids de la police : normal ; couleur : #666 ; ) h1 ( couleur : #f93 ; bordure inférieure : 1px solide #ddd ; espacement des lettres : -0,05em ; poids de la police : gras ; marge supérieure : 0 ; padding-top: 0; ) #bottom ( padding: 10px; taille de police: 0,7em; couleur: #f03; ) #logo (taille de police: 2em; alignement du texte: centre; couleur: #999; ) #logo strong ( poids de la police : normal ; ) #logo span ( affichage : bloc ; taille de la police : 4em ; hauteur de la ligne : 0,7em ; couleur : #666 ; ) p, h2, h3 ( hauteur de la ligne : 1,6em ; ) une ( couleur : #f03; )

  Dans ces styles, nous définissons des coins arrondis pour l'élément #centered. En CSS3, cela sera fait par la propriété border-radius. Ceci n'est pas encore implémenté dans certains navigateurs, mis à part l'utilisation des préfixes -moz et -webkit pour Mozilla Firefox et Safari/Webkit.

  

  Compatibilité

  Comme vous l'avez probablement déjà deviné, la principale source de problèmes de compatibilité est Internet Explorer :

  • L'élément #floater doit avoir une largeur définie
  • IE 6 a un remplissage supplémentaire autour des menus

  235882 vues