Alignement de CSS vertical. Positionnement et étirement absolu. Aligner horizontal

Chaque couche est constamment confrontée à la nécessité d'aligner le contenu dans le bloc: horizontalement ou verticalement. Il y a de bons articles sur ce sujet, mais ils offrent tous beaucoup de choses intéressantes, mais peu d'options pratiques, à cause de laquelle vous devez passer trop de temps à mettre en valeur la principale chose. J'ai décidé de soumettre ces informations dans le formulaire qui est pratique pour moi de ne plus googler Google.

Aligner des blocs avec des tailles connues

Le S. le plus facile utiliser CSS. Alignez les blocs dans lesquels la hauteur est connue à l'avance (pour l'alignement vertical) ou la largeur (pour l'alignement horizontal).

Alignement avec rembourrage

Parfois, vous ne pouvez pas centrer l'article, mais ajouter la frontière avec la frontière " rembourrage.".

Par exemple, il y a une image de 200 par 200 pixels et il est nécessaire de le centrer dans le bloc de 240 à 300. Nous pouvons définir la hauteur et la largeur par le bloc externe \u003d 200px et ajouter à 20 pixels d'en haut et ci-dessous, et 50 à gauche et à droite.

.example-wrapper1 (arrière-plan: # 535E73; largeur: 200px; hauteur: 200px; rembourrage: 20px 50px;)

Alignement des blocs absolument positionnés

Si le bloc est défini " position: absolu.", alors il peut être positionné par rapport au parent le plus proche avec" Position: relatif ". Pour cela, vous devez toutes les propriétés (" haut.","droite","bas","la gauche.") L'unité interne est attribuée à la même valeur que" Marge: auto ".

* Il y a une nuance: la largeur (hauteur) de l'unité intérieure + la valeur gauche (droite, bas, haut) ne doit pas dépasser la taille du bloc parent. Propriétés de gauche fiables (droite, bas, haut) Attribuez 0 (zéro).

.Example-Emballeur2 (Position: Relative; Hauteur: 250px; Arrière-plan: URL (espace.jpg);) .cat-king (largeur: 200px; hauteur: 200px; Position: absolu; haut: 0; gauche: 0; bas: 0; bas: 0; bas: 0; droite: 0; Marge: Auto; Fond: URL (King.png);)

Alignement horizontal

Alignement par "Text-Align: Centre"

Aligner le texte dans le bloc, il y a une propriété spéciale " text-aligner.". Avec la valeur définie" centre"Chaque ligne de texte est nivelée horizontalement. Pour le texte multiligne, une telle solution est utilisée extrêmement rare, plus souvent, cette option peut être trouvée pour l'alignement des couvre-efforts, des liaisons ou des images.

Une fois que je devais inventer le texte pour montrer comment l'alignement du texte fonctionne avec CSS, mais rien d'intéressant à la tête n'est venu. Au début, j'ai décidé de copier quelque part dans le poème pour enfants quelque part, mais je me suis souvenu de cela, recourez le caractère unique de l'article et nos chers lecteurs ne pourront pas le trouver dans Google. Et puis j'ai décidé d'écrire cela ce paragraphe - après tout, l'essence n'est pas avec elle, mais l'essence en alignement.

.Example-text-text (text-alignement: centre; rembourrage: 10px; arrière-plan: # ff90b8;)

Il convient de noter que cette propriété fonctionnera non seulement pour le texte, mais aussi pour tout Éléments de luxe ("Affichage: Inline").

Mais ce texte est aligné sur le bord gauche, mais c'est dans le bloc qui est nivelant par rapport à l'emballage au centre.

.Example-exemple-wrapper3 (text-alignement: centre; arrière-plan: # ff90b8;)

Bloquer l'alignement avec la marge

Les éléments de blocs avec une largeur bien connue sont facilement alignés horizontalement, si vous installez "Margin-gauche: auto; marge-droite: auto". Habituellement une entrée abrégée est utilisée: " marge: 0 Auto"(Au lieu de zéro, il peut y avoir une signification). Mais pour le nivellement vertical, cette méthode ne convient pas.

.Lama-wrapper (hauteur: 200px; arrière-plan: # f1bf88;) .Lama1 (hauteur: 200px; largeur: 200px; arrière-plan: URL (lama.jpg); marge: 0 auto;)

C'est ainsi qu'il est nécessaire d'aligner tous les blocs, dans la mesure du possible (où le positionnement fixe ou absolu n'est pas requis) est le plus logique et adéquat. Bien qu'il semble évident, mais parfois, j'ai vu les exemples effrayants avec des retraites négatives, j'ai donc décidé de clarifier.

Alignement vertical

Avec nivellement vertical beaucoup plus de problèmes - Apparemment, cela dans CSS n'a pas été fourni. Il existe plusieurs façons d'atteindre le résultat souhaité, mais tous ne sont pas très beaux.

Alignement de la hauteur de la ligne

Dans le cas où une seule ligne dans le bloc, il est possible d'atteindre son alignement vertical en appliquant la propriété " hauteur de la ligne"Et la réglage de la hauteur désirée. Pour la fiabilité, il est nécessaire d'installer une" hauteur ", la valeur qui sera égale à la valeur de" hauteur de la ligne ", car ce dernier n'est pas pris en charge dans tous les navigateurs.

.Example-Emballeur4 (hauteur de la ligne: 100px; couleur: # DC09C0; arrière-plan: # e5dae1; hauteur: 100px; text-alignement: centre;)

Il est également possible d'obtenir un alignement de bloc avec plusieurs lignes. Pour ce faire, vous devrez utiliser un emballage de bloc supplémentaire et définir la hauteur de la ligne. L'unité interne peut être multiligne, mais nécessairement "en ligne". Vous devez appliquer "vertical-alignement: milieu".

.Example-exemple-wrapper5 (hauteur de ligne: 160px; hauteur: 160px; taille de la police: 0; arrière-plan: # ff9b00;) .Example-wrapper5 .text1 (Affichage: en ligne-block; taille de la police: 14px; hauteur de la forme: 1.5; alignement vertical: milieu; fond: # fFFAf2; couleur: # ff9b00; text-alignement: centre;)

L'unité d'emballage doit être installée "Taille de la police: 0". Si vous ne définissez pas la taille de la police zéro, le navigateur ajoutera plusieurs pixels inutiles de lui-même. Vous devez également spécifier la taille de la police et la hauteur de la chaîne pour le bloc intérieur, car ces propriétés sont héritées du parent.

Alignement vertical dans les tables

Propriété " aligner verticalement"Agit également sur les cellules de la table. Avec la valeur" moyenne ", la teneur à l'intérieur de la cellule est alignée au centre. Bien sûr, une disposition de table à notre époque est considérée comme une archaïque, mais dans des cas exceptionnels, il est possible. simuler, indiquant " affichage: cellule de table".

Habituellement pour un alignement vertical, j'utilise cette option. Au-dessous de l'exemple de la disposition prise du projet prêt à l'emploi. L'intérêt est la photo qui est centrée par la verticale de cette manière.

.One_Product .img_wrapper (affichage: cellule de table; hauteur: 169px; alignement vertical: milieu; Overflow: caché; fond: #fff; largeur: 255px;). Sone_product img (max-hauteur: 169px; max-largeur: 100 %; min-largeur: 140px; Affichage: bloc; marge: 0 auto;)

Il convient de rappeler que si l'élément est installé "float" est différent de "Aucun", il sera bloqué dans tous les cas (Affichage: Bloc) - alors vous devrez utiliser un bloc de bloc supplémentaire.

Alignement d'un élément en ligne supplémentaire

Et pour des éléments en ligne, vous pouvez appliquer " vertical-alignement: milieu". En même temps, tous les éléments avec" affichage: Inline.", Qui sont en une ligne, sont nivelés par rapport à la ligne centrale totale.

Il est nécessaire de créer un bloc auxiliaire avec une hauteur égale à la hauteur du bloc parent, puis le bloc souhaité est nivelé au centre. Pour ce faire, il est pratique d'utiliser des pseudo-éléments: avant ou: après.

.example-wrapper6 (Taille: 300px; text-align: center; Contexte: # 70DAF1;) .Pudge (affichage: inline-block; vertical-align: Moyen, Arrière-plan: URL (pudge.png); background-color: # FFF; largeur: 200px; Hauteur: 200px; )Riki (Affichage: Inline-Block; Hauteur: 100%; vertical-alignement: milieu;)

Affichage: flex et alignement

Si vous n'êtes pas très intéressé par les utilisateurs de l'explorateur 8 ou des soins que vous êtes prêt à insérer une pièce de JavaScript inutile, vous pouvez utiliser "Afficher: flex". Les blocs Flex s'adaptent parfaitement aux problèmes d'alignement et il suffit d'écrire "Marge: auto" pour centrer le contenu à l'intérieur.

Jusqu'à présent, une telle manière ne me rencontrait pratiquement pas, mais il n'y a pas de restrictions particulières pour lui.

.Example-Emballeur7 (Affichage: Flex; Hauteur: 300px; Fond: # AEB96A;) .Example-wrapper7 img (marge: auto;)

Eh bien, c'est tout ce que je voulais écrire sur l'alignement de CSS. Maintenant, le centrage du contenu ne sera pas un problème!

Souvent, lorsque la nécessité de la nécessité d'un alignement de texte vertical dans le bloc provient. Si cela doit être effectué dans la cellule du tableau, la propriété Vertical-Align CSS est définie.

Mais il y a une question raisonnable, est-il possible de faire sans table, sans surcharger la publication de la page avec des balises supplémentaires? Réponse: "Vous pouvez", mais à cause d'un soutien médiocre pour le navigateur CSS, la résolution de problèmes, la résolution de problèmes est différente de la solution pour d'autres navigateurs courants.

À titre d'exemple, considérons le fragment suivant:

Du texte

et nous allons essayer d'aligner verticalement le texte au centre du bloc et au bord inférieur du bloc.

La solution du problème

Navigateurs "à droite" (y compris MSIE

La plupart des navigateurs modernes prennent en charge CSS2.1, à savoir la valeur de la table de la table pour la propriété d'affichage. Cela nous donne la possibilité de forcer un bloc avec le texte à afficher en tant que cellule de la table et à l'utiliser, alignez le texte verticalement:

div (
Affichage: cellule de table;
Vertical-Aligner: milieu;
}

div (
Affichage: cellule de table;
Alignement vertical: bas;
}

Internet Explorer (jusqu'à la 7ème version inclus)

Résolvez la tâche d'aligner le texte sur le bord inférieur du bloc dans MSIE peut être utilisé en utilisant un positionnement absolu (ici, nous utilisons ici l'élément de chaîne investi dans le bloc):

div (
Position: relatif;
}
Div Span (
Bloc de visualisation;
Position: absolu;
Bas: 0%;
À gauche: 0%;
largeur: 100%;
}

Cet ensemble de règles fonctionnent également dans les navigateurs «Droite».

Spécifier les propriétés

Div Span (
Bloc de visualisation;
largeur: 100%;
}

pas nécessairement, mais ils peuvent être nécessaires si en plus de l'alignement du texte vertical, il est également prévu d'utiliser horizontal, par exemple, Text-Align: Centre;.

Pour l'alignement de texte vertical au centre du bloc, le fragment de source devra encore compliquer - nous introduisons un autre élément de chaîne:

Matériel d'étude:

Centrage vertical en CSS (www.jakpsatweb.cz/css/css-vertical-center-solution.html)
Centre vertical à l'aide de CSS (www.student.oulu.fi/%7elaRirai/www/css/middle/)
Align vertical (www.cssplay.co.uk/ie/valign.html)
vertical-Aligner: milieu (cssing.org.ua/2005/07/14/vertical-align-middle/)
Un autre moyen d'alignement vertical dans CSS (CSSING.ORG.UA/2007/04/26/Another-CSS-Valign-Method)

Centrer des éléments verticaux avec CSS est une tâche qui représente une certaine difficulté pour les développeurs. Cependant, il existe plusieurs méthodes pour ses solutions assez simples. Cette leçon présente 6 options pour le contenu de centrage vertical.

Commençons par S. description générale Tâches.

Tâche centrage vertical

Le centrage horizontal est effectué très simple et facile. Lorsque l'élément de la pièce maîtresse est la ligne, nous utilisons la propriété d'alignement par rapport à l'élément parent. Lorsque le bloc est l'élément - nous définissons la largeur et installation automatique Champs gauche et droit.

La plupart des gens utilisant la propriété Text-Aligner: reportez-vous à la propriété Vertical-Aligner pour le centrage vertical. Tout a l'air assez logique. Si vous avez utilisé des modèles de table, alors utilisez probablement activement l'attribut Valign qui renforce la foi en ce qu'est la voie verticale est la bonne façon de résoudre la tâche.

Mais l'attribut Valign ne fonctionne que dans les cellules du tableau. Et la propriété Vertical-Aligner est très similaire à celle-ci. Il agit également sur des cellules de table et des éléments minuscules.

La valeur de la propriété verticale-align est valide par rapport à l'élément de ligne parental.

Dans la chaîne de texte, l'alignement est effectué par rapport à la hauteur de la chaîne.
Dans le tableau de la table, l'alignement est utilisé par rapport à la valeur calculée par l'algorithme spécial (généralement la hauteur de la ligne est obtenue).

Mais, malheureusement, la propriété Vertical-Align n'agit pas dans des éléments de blocs (par exemple, des paragraphes à l'intérieur de l'élément div. Une telle position peut conduire à l'idée qu'il n'y a pas de solution à la tâche d'alignement vertical.

Mais il existe d'autres méthodes d'éléments de centrage, dont le choix dépend de ce qui est centré sur le conteneur externe.

Méthode de hauteur de ligne

Cette méthode fonctionne lorsque vous souhaitez centrer la ligne verticalement du texte. Tout ce que vous avez à faire est de définir une hauteur de chaîne plus que la taille de la police.

Par défaut, l'espace libre sera distribué de manière uniforme en haut et en bas du texte. Et la chaîne sera centrée verticalement. Souvent, la hauteur de la chaîne est faite égale à la hauteur de l'élément.

HTML:

Texte passé

CSS:

#child (hauteur de ligne: 200px;)

Cette méthode fonctionne dans tous les navigateurs, bien qu'il soit possible de l'utiliser uniquement pour une ligne. La valeur de 200 px dans l'exemple est sélectionnée arbitrairement. Vous pouvez utiliser des valeurs plus que la taille de la police du texte.

Centre d'image à l'aide de la hauteur de la ligne

Et que si le contenu est une image? Sera-ce la méthode ci-dessus de fonctionner? La réponse réside dans une autre ligne de code CSS.

HTML:

CSS:

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

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

Méthode de la table CSS

Il a été mentionné ci-dessus que la propriété Vertical-Align est utilisée pour les cellules de table, où elle fonctionne parfaitement. Nous pouvons déduire notre élément comme une cellule de table et utiliser la propriété Vertical-Aligner pour le centre de contenu vertical.

Noter: La table CSS n'est pas la même que la table HTML.

HTML:

Contenu

CSS:

#Parent (affichage: cellule de table; vertical-alignement: milieu;)

Nous définissons une sortie tabulaire pour l'élément parent DIV et l'élément div intégré est affiché comme une table de table. Vous pouvez maintenant utiliser la propriété Vertical-Aligner pour un conteneur interne. Tout ce qui est en elle sera centré verticalement.

Contrairement à la méthode décrite ci-dessus, dans ce cas, la teneur peut être dynamique, car l'élément DIV modifiera la taille en fonction de son contenu.

L'inconvénient de cette méthode est qu'il ne fonctionne pas dans les anciennes versions IE. Vous devez utiliser l'affichage: Propriété en ligne-block pour le conteneur ci-joint.

Positionnement absolu et champs négatifs

Cette méthode fonctionne également dans tous les navigateurs. Mais cela nécessite que l'élément centralisé soit demandé de la hauteur.

Dans le code de code, un centrage simultané horizontalement et vertical sont effectués:

HTML:

Contenu

CSS:

#Parent (position: absolu; top: 50%; gauche: 50%; hauteur: 30%; largeur: 50%; marge: -15% 0 0 à 225%;)

Établissez d'abord le type de positionnement des éléments. Ensuite, pour l'élément DIV intégré, définissez les valeurs des propriétés du haut et de gauche égale à 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, il est nécessaire de le lever (demi-hauteur) et de passer à gauche (la moitié de la largeur), puis le centre coïncide avec le centre de l'élément parent. Donc, la connaissance de la hauteur de l'élément dans ce cas est nécessaire. Ensuite, réglez l'élément les valeurs négatives des champs supérieur et gauche égal à la moitié de la hauteur et de la largeur, respectivement.

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

Positionnement absolu et étirement

Dans le code de l'exemple, la verticale et l'horizontale est centrée.

HTML:

Contenu

CSS:

#Parent (position: absolu; haut: 0; bas: 0; gauche: 0; droite: 0; largeur: 50%; hauteur: 30%; marge: auto;)

L'idée de cette méthode consiste à étirer l'élément imbriqué à toutes les 4 bordures de l'élément parent en réglant les propriétés supérieure, inférieure, droite et les valeurs de gauche 0.

L'installation de la formation automatique de champs sur toutes les parties entraînera une tâche de valeurs égales pour les 4 parties et retirera notre élément imbriqué DIV au centre de l'élément parent.

Malheureusement, cette méthode Ne fonctionne pas dans IE7 et ci-dessous.

Les tiges égales d'en haut et ci-dessous

Dans cette méthode, les indents égaux sont clairement définis et du bas de l'élément parent.

HTML:

Contenu

CSS:

#Parent (rembourrage: 5% 0;) #child (rembourrage: 10% 0;)

Dans CSS Code, un exemple d'indentesses d'en haut et ci-dessous est défini pour les deux éléments. Pour l'élément embarqué, le réglage des trindages servira à un centrage vertical. Et les tirets de l'élément parent corporellent l'élément imbriqué.

Pour changement dynamique La taille des éléments sont utilisées unités relatives Des mesures. Et pour les unités de mesure absolues devra faire des calculs.

Par exemple, si l'élément parent a une hauteur de 400 px et que l'élément imbriqué est 100px, les trindages de 150px sont nécessaires d'en haut et ci-dessous.

150 + 150 + 100 = 400

Use% permet aux calculs de quitter le navigateur.

Cette méthode fonctionne partout. Arrière est la nécessité de calculs.

Noter: Cette méthode fonctionne en raison de l'installation de l'indentation externe de l'élément. Vous pouvez également utiliser les champs à l'intérieur de l'élément. La décision d'utiliser des champs ou des retenues doit être prise en fonction des spécificités du projet.

Flotter div

Cette méthode utilise un élément div vide qui flotte et aide à contrôler la position de notre élément attaché dans le document. Veuillez noter que la Div Flotante est située avant notre élément investi dans le code HTML.

HTML:

Contenu

CSS:

#Parent (hauteur: 250px;) #floater (flotteur: gauche; hauteur: 50%; largeur: 100%; marge-bas: -50px;) #child (clair: Hauteur: 100px;)

Nous déplacons la div gauche divisée ou la droite et demandons une hauteur de 50% de l'élément parent. Ainsi, il remplira la moitié supérieure de l'élément parent.

Étant donné que cette div est flottante, elle est retirée du flux habituel du document et nous devons annuler le flux autour de l'élément intégré. L'exemple utilise clairement: les deux, mais il suffit d'utiliser la direction ainsi que le déplacement de l'élément divitant vide.

La limite supérieure de l'élément incorporé div est située directement sous la limite inférieure de l'élément div vide. Nous devons déplacer l'élément imbriqué jusqu'à la moitié de la hauteur de l'élément vide flottant. Pour résoudre le problème, la valeur négative de la propriété de marge-fond est utilisée pour flotter l'élément div vide.

Cette méthode fonctionne également dans tous les navigateurs. Cependant, son utilisation nécessite un élément divisé supplémentaire et une connaissance de l'altitude de l'élément imbriqué.

Conclusion

Toutes les méthodes décrites sont faciles à utiliser. La difficulté réside dans le fait qu'aucun d'entre eux ne convient à tous les cas. Il est nécessaire d'analyser le projet et de choisir celui qui convient bien aux exigences.

Tous ceux qui sont engagés dans la mise en page, tôt ou tard sont confrontés à la nécessité d'aligner les éléments en verticalement ... et de savoir quelles difficultés peuvent survenir lors de l'alignement de l'élément au centre. CSS a le `vertical-alignement` avec une multitude de valeurs qui, selon la logique, et doivent effectuer un alignement vertical. Cependant, dans la pratique, cela fonctionne du tout comme prévu.

Pour résoudre ce problème, il existe plusieurs techniques. En plus de plus, considérez chacun d'eux.

1. Alignement en utilisant une table

Dans ce cas, nous remplaçons le bloc externe de la table d'une cellule. L'alignement sera appliqué au contenu de la cellule, c'est-à-dire au bloc intérieur.

Html.

CSS.

Extérieur (largeur: 200px; hauteur: 200px; text-align: centre; alignement vertical: milieu; fond de fond: #ffc;)

Le principal moins cette solutionDu point de vue de la sémantique - l'application du tableau n'est pas directement destinée. Le second minus est qu'il est nécessaire d'ajouter un autre élément autour du bloc externe pour créer une table.

Le premier moins peut être partiellement non lu, remplaçant les balises Tags sur la DIV et réglage du mode de table d'affichage dans CSS.

Html.

CSS.

Wrapper extérieur (affichage: table;) .outer (affichage: cellule de table;)

2. Alignement avec les trindages

Si nous connaissons la hauteur des blocs internes et externes, l'alignement peut être réglé par des tirettes verticales de l'unité interne à l'aide de la formule: (h extérieur-h intérieure) / 2.

CSS.

Extérieur (hauteur: 200px;) .inner (hauteur: 100px; marge: 50px 0;)

La solution moins est la connaissance obligatoire de la hauteur des deux blocs.

3. Alignement avec la hauteur de la ligne

Si le bloc interne ne prend pas plus d'une ligne du texte, vous pouvez utiliser la propriété de hauteur de ligne et la définir une hauteur égale du bloc externe. Étant donné que la teneur en bloc interne ne doit pas passer à la deuxième ligne, il est également souhaitable d'ajouter l'espace blanc: Nowrap et Overflow: règles cachées.

CSS.

Extérieur (hauteur: 200px; hauteur de ligne: 200px;) .inner (espace blanc: Nowrap; Overflow: caché;)

Cette méthode peut être utilisée pour aligner le texte multiligne. Pour ce faire, le bloc intérieur doit remplacer la valeur de la hauteur de la ligne, ainsi que l'affichage Ajouter: En ligne-Block et Vertical-Align: milieu.

CSS.

Extérieur (hauteur: 200px; hauteur de ligne: 200px;) .inner (hauteur de ligne: normale; Affichage: en ligne-bloc; vertical-alignement: milieu;)

Le moins du procédé - la hauteur du bloc externe doit être connue.

4. Alignement avec "Stretching"

Cette méthode peut être utilisée lorsque la hauteur de l'unité interne nous est connue et externe - non.

Pour appliquer cette méthode, nous avons besoin de:

Bloc externe Position de positionnement relatif: relative et interne - Position absolue: absolu;
Ajoutez plusieurs règles supérieures: 0 et en bas: 0, à la suite de laquelle il s'étire sur toute la hauteur du bloc externe;
Pour les trindages verticaux de l'unité intérieure, définissez la valeur automatique.

CSS.

Extérieur (position: relatif;) .inner (hauteur: 100px; position: absolu; haut: 0; bas: 0; marge: auto 0;)

5. Alignement à l'aide de la marge négative

Semblable au précédent, cette méthode est utilisée lorsque la hauteur du bloc externe est inconnue, mais la hauteur de l'interne est connue.

Il est nécessaire de spécifier le bloc externe de positionnement relatif et l'interne est absolu. Après cela, déplacez le bloc intérieur vers le bas de la moitié de la hauteur du bloc de bloc externe: 50% et relevez la moitié de l'altitude de la marge-haut: -h _intérieur / 2 .

CSS.

Extérieur (position: relatif;) .inner (hauteur: 100px; position: absolu; haut: 50%; marge-haut: -50px;)

Moins cette méthode - La hauteur de l'unité intérieure doit être connue.

6. Alignement avec transformation

La méthode peut être appliquée lorsque la hauteur de l'unité intérieure est inconnue. Il est nécessaire de déplacer le bloc intérieur vers le bas de la moitié de la hauteur de l'unité supérieure externe: 50%, après quoi il est utilisé pour utiliser la propriété de transformation et la relever à l'aide de la fonction de traduction (-50%).

CSS.

Extérieur (position: relatif;) .inner (Position: Absolute; Top: 50%; Transformation: Traducty (-50%);)

7. Alignement avec un pseudo-élément

C'est le plus voie universellequi peut être utilisé lorsque la hauteur des deux blocs est inconnue.

L'essence de la méthode en plus dans un bloc externe du bloc de ligne en ligne en ligne avec une hauteur de 100% et la tâche à son alignement vertical. Ainsi, la hauteur du bloc ajouté sera égale à la hauteur du bloc externe. Le bloc interne est en train de niveler verticalement relativement ajouté et donc le bloc externe.

Afin de ne pas casser la sémantique, il est souhaitable d'ajouter un bloc minuscule en utilisant avant ou après des pseudo-éléments.

CSS.

Extérieur: avant: 100%; alignement vertical: milieu; contenu: "";) .inner (affichage: en ligne-block; vertical-alignement: milieu;)

Le moins de cette méthode - il est impossible de se déplacer au positionnement absolu de l'unité intérieure.

8. Alignement avec Flexbox

La méthode la plus avancée d'alignement vertical est l'utilisation d'une disposition de boîte flexible (ou abrégée Flexbox.). Il vous permet de contrôler de manière flexible le positionnement des éléments sur la page, de les avoir pratiquement. L'alignement dans le centre de Flexbox est une tâche très simple.

Dans CSS, certains à première vue, des choses simples se révèlent pas si faciles à exécuter. L'une de ces choses est l'alignement, c'est-à-dire Quand un élément doit être positionné dans une autre valeur relative.

Cet article présente certaines solutions prêtes à simplifier les travaux sur le centrage des éléments horizontalement et (ou) verticalement.

Remarque: Dans chaque solution, une liste des navigateurs indiquant les versions dans lesquelles le code CSS spécifié fonctionne.

CSS - Alignement du bloc dans le centre

1. Alignement d'un bloc au centre de l'autre. Dans ce cas, les premier et deuxième bloc ont des dimensions dynamiques.

...

Parent (Position: Relatif;) .child: 50%; Top: 50% ;Webkit-Transform: Traduire (-50%, -50%); -Moz-Transform: Traduire (-50%, -50%); -MS-Transform: Traduire (-50%, -50%); -O-transformer: Traduire (-50%, -50%%); Transformer: Traduire (-50%, -50%);)

Chrome 4.0+
Firefox 3.6+
Internet Explorer. 9+
Opéra 10.5+
Safari 3.1+

2. Alignement d'un bloc au centre de l'autre. Dans ce cas, la deuxième unité a des dimensions fixes.

Parent (position: absolu; gauche: 50%; TOP: 50%; / * Largeur et hauteur 2 Bloc * / Largeur: 500PX; Hauteur: 250px; / * Les valeurs sont déterminées en fonction de sa taille * / * Margin-gauche \u003d - largeur / 2 * / margin-gauche: -250px; / * margin-top \u003d - hauteur / 2 * / marge-top: -125px;)