Alignement horizontal et vertical des éléments. Centrer un div avec position : propriété absolue ou fixe Centrer un div

En CSS, certaines choses apparemment simples ne sont pas si faciles à faire. L'une de ces choses est l'alignement, c'est-à-dire lorsqu'un élément doit être positionné d'une certaine manière par rapport à un autre.

Cet article présente quelques solutions toutes faites qui permettront de simplifier le travail de centrage des éléments horizontalement et/ou verticalement.

Remarque : sous chaque solution se trouve une liste de navigateurs indiquant les versions dans lesquelles le code CSS spécifié fonctionne.

CSS - Bloc d'alignement central

1. Alignez un bloc au centre d’un autre. Dans ce cas, les premier et deuxième blocs ont des tailles dynamiques.

... ...

Parent ( position : relative ; ) .child ( position : absolue ; gauche : 50 % ; haut : 50 % ; -webkit-transform : traduire (-50 %, -50 %) ; -moz-transform : traduire (-50 % , -50 % ); -ms-transform : traduire (-50 %, -50 %); -o-transform : traduire (-50 %, -50 %) ; ; )

  • Chrome 4.0+
  • Firefox 3.6+
  • Internet Explorer 9+
  • Opéra 10.5+
  • Safari3.1+

2. Aligner un bloc au centre d'un autre. Dans ce cas, le deuxième bloc a des dimensions fixes.

Parent ( position : relative ; ) .child ( position : absolue ; gauche : 50 % ; haut : 50 % ; /* largeur et hauteur de 2 blocs */ largeur : 500px ; hauteur : 250px ; /* Les valeurs sont déterminées en fonction sur sa taille */ /* margin-left = - width / 2 */ margin-left : -250px /* margin-top = - height / 2 */ margin-top : -125px )

Navigateurs prenant en charge cette solution :

  • Chrome 1.0+
  • Firefox 1.0+
  • Internet Explorer 4.0+
  • Opéra 7.0+
  • Safari 1.0+

3. Aligner un bloc au centre d'un autre. Dans ce cas, le deuxième bloc a des dimensions spécifiées en pourcentages.

Parent ( position : relative ; ) .child ( position : absolue ; /* largeur et hauteur de 2 blocs en % */ hauteur : 50% ; largeur : 50% ; /* Les valeurs sont déterminées en fonction de sa taille en % * / gauche : 25 % ; /* (100 % - largeur) / 2 */ haut : 25 % /* (100 % - hauteur) / 2 */ )

Navigateurs prenant en charge cette solution :

  • Chrome 1.0+
  • Firefox 1.0+
  • Internet Explorer 4.0+
  • Opéra 7.0+
  • Safari 1.0+
CSS - Alignement horizontal

1. Alignement d'un élément de bloc (affichage : bloc) par rapport à un autre (dans lequel il se trouve) horizontalement :

... ...

Bloquer ( marge gauche : auto ; marge droite : auto ; )

Navigateurs prenant en charge cette solution :

  • Chrome 1.0+
  • Firefox 1.0+
  • Internet Explorer 6.0+
  • Opéra 3.5+
  • Safari 1.0+

2. Alignez horizontalement un élément de ligne (affichage : inline) ou de bloc de ligne (affichage : inline-block) :

... ...

Parent ( text-align: center; ) .child ( display: inline-block; )

Navigateurs prenant en charge cette solution :

  • Chrome 1.0+
  • Firefox 3.0+
  • Internet Explorer 8.0+
  • Opéra 7.0+
  • Safari 1.0+
CSS - Alignement vertical

1. Centrez un élément (affichage : inline, affichage : inline-block) par rapport à l'autre (dans lequel il se trouve) au centre. Le bloc parent dans cet exemple a une hauteur fixe, définie à l'aide de la propriété CSS line-height.

... ...

Parent ( hauteur de ligne : 500 px ; ) .child ( affichage : bloc en ligne ; alignement vertical : milieu ; )

Navigateurs prenant en charge cette solution :

  • Chrome 1.0+
  • Firefox 3.0+
  • Internet Explorer 8.0+
  • Opéra 7.0+
  • Safari 1.0+

2. Centrer verticalement un bloc par rapport à un autre en représentant le parent comme un tableau, et l'enfant comme une cellule de ce tableau.

Parent ( affichage : tableau ; ) .child ( affichage : cellule de tableau ; alignement vertical : milieu ; )

Navigateurs prenant en charge cette solution :

  • Chrome 1.0+
  • Firefox 1.0+
  • Internet Explorer 8.0+
  • Opéra 7.5+
  • Safari 1.0+

Si vous connaissez d'autres astuces intéressantes ou des solutions d'alignement prêtes à l'emploi utiles, partagez-les dans les commentaires.

Souvent, dans la pratique, nous devons résoudre le problème du regroupement et de l'alignement du contenu à l'aide de CSS. Aujourd'hui, nous examinerons les principales façons de placer des éléments dans une rangée horizontale.

Le contenu de cet article est destiné à aider les concepteurs de sites Web débutants à maîtriser les techniques de mise en page de pages Web.

Que choisir ou méthodes

Il existe plusieurs façons de disposer les éléments structurels en rangée dans un plan horizontal. Les plus utiles, du point de vue de l’application pratique, sont :

  • Méthode "Flottant"
  • Méthode "Inline-block"
  • Méthode de cellule de tableau

Chacun d’eux a ses propres avantages, applications et inconvénients. Regardons-les dans l'ordre.

"Pour une percée" ou un peu de théorie

Tous les éléments structurels du HTML peuvent être divisés en :

En ligne (intégré) - tapez img, durée et ainsi de suite. Nous n'avons pas la possibilité de modifier leur arrière-plan et de leur donner des dimensions linéaires arbitraires.

Bloc - occupant toute la largeur du bloc parent, commençant toujours sur une nouvelle ligne - p, h, div.

Un exemple visuel de structures en ligne et en blocs est donné ci-dessous :

Méthode flottante

Comme on le sait déjà (voir ci-dessus), un élément de bloc est placé sur une nouvelle ligne, quelle que soit la largeur qui lui est spécifiée ( largeur). Par conséquent, réduire la taille horizontale div-Oh, tu ne peux pas construire des blocs à la suite.

La méthode de solution la plus populaire (en particulier parmi les concepteurs de configuration débutants) consiste à utiliser la propriété flotter.

Propriété CSS flotter a acquis une grande popularité et une valeur pratique après la transition de la méthode de mise en page tabulaire à celle en bloc.

Float : gauche (droite) transforme un élément de bloc en élément flottant, l'aligne sur le bord gauche (droit) du bloc parent et fait flotter le texte et les autres éléments vers la droite (gauche).

Par exemple, créons quatre blocs qui doivent être placés dans une rangée :

< html> < head> < meta charset= "utf-8" > < link rel= "stylesheet" media= "all" type= "text/css" href= "style.css" /> < body> < div class = "bblock" >Nous construisons< div class = "bblock" >horizontal< div class = "bblock" >rangée< div class = "bblock" >des divas

Et une feuille de style externe avec le contenu suivant :

div ( float: left; /*Définir l'habillage*/ line-height: 120px; font-size: 40px; background: dodgerblue; couleur: blanc; margin-top: 60px; width: 320px; /*Fixer la largeur du bloc*/ )

Le résultat est quatre blocs disposés sur une rangée horizontale et alignés sur le bord gauche du bloc parent :

Parfois, en pratique, il est nécessaire d'aligner les blocs sur le bord droit de l'élément parent. Modifions le flux autour des blocs dans l'exemple précédent :

flotter : à droite ;

Faites attention aux inscriptions situées dans les blocs. À première vue, il peut sembler que l’exemple fonctionne de manière tordue. Mais en fait, le navigateur a traité le code correctement : il a lu les blocs de haut en bas et a fait ce que nous lui avons demandé : il l'a aligné à droite. Gardez ce point à l'esprit lors de l'utilisation de la propriété flotteur : à droite.

Afin d'interrompre le flux d'éléments en provenance d'un endroit précis, utilisez la ligne :

< div style= "clear: both;" >

Dans l'exemple discuté ci-dessus, nous définissons la distance entre les blocs en utilisant l'indentation marge droite. Mais que faire si, lors de la mise en page d'une page, vous avez une tâche : placer des blocs dans une rangée, les centrer, et aussi avoir des retraits uniquement entre eux, mais pas à l'extérieur ?

L'algorithme des actions est le suivant.

< div class = "wrap" > < div class = "bblock" >Nous construisons< div class = "bblock" >horizontal< div class = "bblock" >rangée< div class = "bblock" >des divas

Wrap ( width: 1310px; /*fixe la largeur du wrapper*/ margin: 0 auto; /*center it*/ background: darkgray; height: 120px; /*Set la hauteur du wrapper*/ ) . bblock ( float: left; /*Définir l'habillage*/ hauteur de ligne: 120px; /*Hauteur de ligne + centrage vertical du texte*/ taille de police: 40px; arrière-plan: bleu dodger; couleur: blanc; largeur: 320px; /*Fix largeur du bloc*/ margin- right: 10px; text- align: center /*Centrer le texte horizontalement*/ ) . wrap : last- child ( margin- right: 0px; /*Supprimer la marge du dernier div*/ )

En conséquence, nous obtenons l'image suivante :

Eh bien, on ne peut pas envisager toutes les situations pratiques, passons donc aux caractéristiques générales.

Important!!!

Méthode "Inline-block"

Les éléments en ligne et en bloc ont leurs avantages et leurs inconvénients dans le contexte de chaque tâche spécifique à résoudre. Et si vous combiniez leurs avantages ?

Rencontrez le point fort du programme - l'immobilier affichage : bloc en ligne.

display : inline-block génère un élément block-line, qui est essentiellement en ligne, mais conserve les propriétés du bloc - vous permet de modifier les dimensions linéaires, de définir les marges, le remplissage, etc.

Un élément block-line a les propriétés suivantes :

  • La hauteur et la largeur du bloc sont déterminées automatiquement en fonction du contenu et de la valeur de remplissage ( rembourrage)
  • la hauteur et la largeur du bloc peuvent être réglées de manière fixe
  • L’effondrement des frontières n’a aucun effet.

Regardons un exemple de création d'un menu de navigation simple contenant une image et un lien.

< div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Le lien du menu 1 est plus long que d'habitude< div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Lien de menu 2< div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Lien de menu 3< div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Lien de menu 4

Nav ( display: inline- block; /*Définir l'affichage de la ligne de bloc*/ width: 180px; /*définir la largeur du bloc*/ background: dodgerblue; ) . chaîne ( text- align: center; /*Aligner le texte horizontalement*/ )

En conséquence, nous obtenons le menu suivant :

Comme vous pouvez le voir, cela s'est avéré un peu tordu... Mais nous n'avons pas l'intention de nous énerver, nous appliquons donc la propriété CSS à nos divs aligner verticalement(voir ci-dessous pour plus de détails) :

alignement vertical : haut ;

Notre barre de navigation est désormais alignée sur la ligne supérieure :

Bien sûr, l'exemple donné est primitif, mais je suis sûr que sur cette base, vous pouvez créer un véritable chef-d'œuvre !!!

Important!!!

  • Pour les anciennes versions de Firefox, ajoutez la ligne :

    affichage : - moz-inline-stack ;


    et enveloppez l'élément dans un wrapper div supplémentaire.
  • IE 7 et versions antérieures - ajoutez les lignes :

    zoomer : 1 ;

  • /*set hasLayout*/ * display: inline;
/*asterisk - hack pour IE */ _height: 250px;

/*min-height ne fonctionne pas dans IE6*/

Je constate que certains navigateurs réagissent sélectivement à ces lignes (Firefox au premier, IE au reste). Méthode des tableaux (L'approche tabulaire est depuis longtemps la norme de mise en page, principalement en raison de la simplicité et de l'intuitivité du balisage. Très probablement, c'est ce qui a provoqué l'apparition du formatage des tableaux en CSS., Propriétés affichage : tableau

cellule de table Méthode des tableaux table en ligne ), vous permettent d'effectuer un formatage tabulaire des éléments sans utiliser de tableaux HTML.:

< div class = "wrap" > < div class = "bblock" >Nous construisons< div class = "bblock" >Pour placer des blocs horizontalement, nous avons besoin d'un élément parent qui a la propriété< div class = "bblock" >rangée< div class = "bblock" >, et les éléments enfants (cellules) ayant la propriété

affichage : tableau-cellule

Important!!!

  • Contrairement aux méthodes "Inline-block" et "float", lors de la réduction de la largeur de la fenêtre du navigateur Web, les cellules ne descendent pas.
  • Vous n'avez pas la possibilité de définir la propriété margin pour les cellules de pseudo-tableau.
  • Compatibilité entre navigateurs. Les propriétés de la famille display: table* ne sont pas prises en charge par IE6, IE7. De plus, dans IE8, vous pouvez constater un bug de rendu dynamique pour les éléments pseudo-tabulaires sous la forme de cellules manquantes de manière aléatoire. Cette erreur apparaît le plus souvent lors du dessin initial du document.

    • Très souvent la tâche est d'aligner un bloc au centre de la page/de l'écran, et même pour que sans script Java, sans définir de dimensions rigides ni de retraits négatifs, et pour que les barres de défilement fonctionnent pour le parent si le bloc dépasse sa taille . Il existe de nombreux exemples monotones sur Internet sur la façon d'aligner un bloc au centre de l'écran. En règle générale, la plupart d’entre eux reposent sur les mêmes principes.

    Vous trouverez ci-dessous les principaux moyens de résoudre le problème, leurs avantages et leurs inconvénients. Pour comprendre l'essence des exemples, je recommande de réduire la hauteur/largeur de la fenêtre Résultat dans les exemples via les liens fournis.

    Option 1 : Indentation négative. Nous positionnons le bloc avec les attributs haut et gauche à 50 %, et connaissant à l'avance la hauteur et la largeur du bloc, définissons une marge négative, qui est égale à la moitié de la taille du bloc. Un énorme inconvénient de cette option est que vous devez compter les retraits négatifs. De plus, le bloc ne se comporte pas tout à fait correctement lorsqu'il est entouré de barres de défilement : il est simplement coupé car il a des marges négatives.

    Parent ( largeur : 100 % ; hauteur : 100 % ; position : absolue ; haut : 0 ; gauche : 0 ; débordement : auto ; ) .block ( largeur : 250 px ; hauteur : 250 px ; position : absolue ; haut : 50 % ; gauche : 50 % ; marge : -125px 0 0 -125px ; img (largeur maximale : 100 % ; hauteur : auto ; affichage : bloc ; marge : 0 auto ; bordure : aucune ; ) )

    Option 2. Indentation automatique. Moins courant, mais similaire au premier. Pour le bloc, définissez la largeur et la hauteur, positionnez les attributs en haut à droite en bas à gauche sur 0 et définissez la marge automatique. L'avantage de cette option est de faire fonctionner les barres de défilement sur le parent, si ce dernier a une largeur et une hauteur définies à 100 %. L'inconvénient de cette méthode est le réglage rigide des dimensions.

    Parent ( largeur : 100 % ; hauteur : 100 % ; position : absolue ; haut : 0 ; gauche : 0 ; débordement : auto ; ) .block ( largeur : 250 px ; hauteur : 250 px ; position : absolue ; haut : 0 ; droite : 0 ; bas : 0 ; gauche : 0 ; marge : auto ; img (largeur maximale : 100 % ; hauteur : auto ; affichage : bloc ; marge : 0 auto ; bordure : aucune ; )

    Option 3. Tableau. Nous définissons les styles de tableau pour le parent et définissons l'alignement du texte au centre de la cellule parent. Et nous donnons au bloc un modèle de bloc de lignes. Les inconvénients que nous obtenons sont des barres de défilement qui ne fonctionnent pas, et en général, l'esthétique de « l'émulation » de table n'est pas bonne.

    Parent ( largeur : 100 % ; hauteur : 100 % ; affichage : tableau ; position : absolue ; haut : 0 ; gauche : 0 ; > .inner ( affichage : cellule de tableau ; alignement du texte : centre ; alignement vertical : milieu ; ) ) .block ( display: inline-block; img ( display: block; border: none; ) )

    Pour ajouter un parchemin à cet exemple, vous devrez ajouter un élément supplémentaire au design.
    Exemple : jsfiddle.net/serdidg/fk5nqh52/3.

    Option 4. Pseudo-élément. Cette option est dépourvue de tous les problèmes répertoriés dans les méthodes précédentes et résout également les problèmes d'origine. L'idée est de styliser le pseudo-élément before sur le parent, à savoir 100 % de hauteur, d'alignement central et de modèle de bloc en ligne. De la même manière, le bloc lui-même est défini sur un modèle de bloc linéaire, aligné au centre. Pour éviter que le bloc « tombe » sous le pseudo-élément lorsque la taille du premier est plus grande que son parent, on indique au parent white-space : nowrap et font-size : 0, après quoi on annule ces styles pour le bloc avec ce qui suit - espace blanc : normal. Dans cet exemple, font-size: 0 est nécessaire pour supprimer l'espace résultant entre le parent et le bloc en raison du formatage du code. L'espace peut être supprimé d'autres manières, mais il est préférable de simplement l'éviter.

    Parent (largeur : 100 % ; hauteur : 100 % ; position : absolue ; haut : 0 ; gauche : 0 ; débordement : auto ; espace blanc : nowrap ; alignement du texte : centre ; taille de police : 0 ; & : avant ( hauteur : 100 % ; affichage : bloc en ligne ; alignement vertical : milieu ; contenu : " " ;

    Ou, si vous avez besoin que le parent occupe uniquement la hauteur et la largeur de la fenêtre, et non la page entière :

    Parent ( position : fixe ; haut : 0 ; droite : 0 ; bas : 0 ; gauche : 0 ; débordement : auto ; espace blanc : nowrap ; alignement du texte : centre ; taille de police : 0 ; &: avant ( hauteur : 100 % ; affichage : bloc en ligne ; alignement vertical : milieu ; contenu : " ( affichage : bloc ; bordure : aucun ; ) )

    Option 5. Flexbox. L’un des moyens les plus simples et les plus élégants consiste à utiliser flexbox. Il ne nécessite pas de mouvements corporels inutiles, décrit assez clairement l'essence de ce qui se passe et est très flexible. La seule chose à retenir lors du choix de cette méthode est la prise en charge d'IE à partir de la version 10 incluse. caniuse.com/#feat=flexbox

    Parent (largeur : 100 % ; hauteur : 100 % ; position : fixe ; haut : 0 ; gauche : 0 ; affichage : flex ; aligner les éléments : centre ; aligner le contenu : centre ; justifier le contenu : centre ; débordement : auto ; ) .block ( arrière-plan : #60a839 ; img ( affichage : bloc ; bordure : aucune ; ) )

    Option 6. Transformer. Convient si nous sommes limités par la structure et qu'il n'y a aucun moyen de manipuler l'élément parent, mais que le bloc doit être aligné d'une manière ou d'une autre. La fonction CSS Translate() viendra à la rescousse. Une valeur de positionnement absolu de 50 % positionnera le coin supérieur gauche du bloc exactement au centre, puis une valeur de translation négative déplacera le bloc par rapport à ses propres dimensions. Veuillez noter que des effets négatifs peuvent apparaître sous la forme de bords ou de styles de police flous. De plus, cette méthode peut entraîner des problèmes de calcul de la position du bloc à l'aide de java-script. Parfois, pour compenser la perte de 50 % de la largeur due à l'utilisation de la propriété CSS left, la règle spécifiée pour le bloc peut être utilisée. aide : marge droite : -50% .

    Parent ( largeur : 100 % ; hauteur : 100 % ; position : fixe ; haut : 0 ; gauche : 0 ; débordement : auto; ) .block ( position : absolue ; haut : 50 % ; gauche : 50 % ; transformation : traduire ( -50%, -50%); img ( affichage : bloquer ; ) )

    Option 7. Bouton. Option utilisateur, où le bloc est encadré dans une balise de bouton. Le bouton a la propriété de centrer tout ce qui se trouve à l'intérieur, à savoir les éléments du modèle inline et block-line (inline-block). En pratique, je déconseille de l'utiliser.

    Parent (largeur : 100 % ; hauteur : 100 % ; position : absolue ; haut : 0 ; gauche : 0 ; débordement : auto ; arrière-plan : aucun ; bordure : aucune ; contour : aucun ; ) .block ( affichage : bloc en ligne ; img (affichage : bloc ; ; bordure : aucune ; ) )

    Bonus En utilisant l'idée de la 4ème option, vous pouvez définir des marges externes pour le bloc, et en même temps ces dernières seront affichées de manière adéquate entourées de barres de défilement.
    Exemple : jsfiddle.net/serdidg/nfqg9rza/2.

    Vous pouvez également aligner l'image au centre et si l'image est plus grande que le parent, la redimensionner à la taille du parent.
    Exemple : jsfiddle.net/serdidg/nfqg9rza/3.
    Exemple avec une grande image :

    Si vous coupez un site Web créé sur la base du HTML, vous verrez une certaine structure en couches. De plus, son apparence ressemblera à un gâteau en couches. Si vous le pensez, c’est probablement que vous n’avez pas mangé depuis longtemps. Alors rassasiez d’abord votre faim, puis nous vous expliquerons comment centrer une couche div sur votre site :

    Avantages de la mise en page à l'aide d'une balise

    Il existe deux principaux types de structure de site Web :

    • Tabulaire;
    • Bloc.

    La disposition tabulaire était dominante même à l’aube d’Internet. Ses avantages incluent la précision du positionnement spécifié. Mais il présente néanmoins des défauts évidents. Les principaux sont la longueur du code et la faible vitesse de chargement.

    Lors de l'utilisation de la disposition en tableau, la page Web ne s'affichera pas tant qu'elle n'est pas complètement chargée. Lors de l’utilisation de blocs div, les éléments sont affichés immédiatement.

    En plus d'une vitesse de chargement élevée, la construction en bloc d'un site Web vous permet de réduire plusieurs fois la quantité de code html. Y compris grâce à l'utilisation de classes CSS.

    Cependant, une disposition tabulaire doit être utilisée pour structurer l'affichage des données sur la page. Un exemple classique de son utilisation est l’affichage de tableaux.

    La construction de blocs basée sur des balises est également appelée couche par couche, et les blocs eux-mêmes sont appelés couches. En effet, lorsque certaines valeurs de propriété sont utilisées, elles peuvent être empilées les unes sur les autres, à l'instar des calques de Photoshop.

    Aides au positionnement

    Dans la disposition en bloc, il est préférable de positionner les calques à l'aide de feuilles de style en cascade. La principale propriété CSS responsable de la mise en page est float.
    Syntaxe de propriété :
    flotteur : gauche | à droite | aucun | hériter
    Où:

    • gauche – alignez l’élément sur le bord gauche de l’écran. Le flux autour des éléments restants se produit à droite ;
    • à droite – alignement à droite, circulation autour des autres éléments – à gauche ;
    • aucun – l'emballage n'est pas autorisé ;
    • hériter – hérite de la valeur de l'élément parent.

    Regardons un exemple léger de positionnement de divs à l'aide de cette propriété :

    #gauche ( largeur : 200px ; hauteur : 100px ; float : gauche ; arrière-plan : rgb(255,51,102); ) #right ( largeur : 200px ; hauteur : 100px ; float : droite ; arrière-plan : rgb(0,255,153); ) Bloc gauche Bloc droit

    Nous allons maintenant essayer d'utiliser la même propriété pour positionner le troisième div au centre de la page. Mais malheureusement, float n'a pas de valeur centrale. Et lorsque vous donnez à un nouveau bloc une valeur d'alignement vers la droite ou vers la gauche, il est décalé dans la direction spécifiée. Par conséquent, il ne reste plus qu'à définir float: left sur les trois blocs :

    Mais ce n’est pas non plus la meilleure option. Lorsque la taille de la fenêtre est réduite, tous les calques sont alignés verticalement sur une rangée et lorsque la taille est augmentée, ils collent au bord gauche de la fenêtre. Nous avons donc besoin d’une meilleure façon de centrer le div.

    Centrage des calques

    Dans l’exemple suivant, nous utiliserons un calque conteneur dans lequel nous placerons les éléments restants. Cela résout le problème des blocs se déplaçant les uns par rapport aux autres lorsque la taille de la fenêtre est modifiée. Le centrage du conteneur au milieu se fait en définissant les propriétés margin à zéro pour les marges du bord supérieur et auto sur les côtés (marge : 0 auto ) :

    #conteneur ( largeur : 600px ; marge : 0 auto ; ) #gauche ( largeur : 200px ; hauteur : 100px ; float : gauche ; arrière-plan : rgb(255,51,102); ) #right ( largeur : 200px ; hauteur : 100px; float : gauche; arrière-plan : rgb(0,255,153); #center ( largeur : 200 px ; hauteur : 100 px ; float : gauche ; arrière-plan : rgb(255,0,0); ) Bloc de gauche Bloc central Bloc de droite

    Le même exemple montre comment centrer un div horizontalement. Et si vous modifiez un peu le code ci-dessus, vous pouvez obtenir un alignement vertical des blocs. Pour ce faire, il vous suffit de modifier la longueur de la couche conteneur (la réduire). Autrement dit, après avoir modifié sa classe CSS, elle devrait ressembler à ceci :

    Après le changement, tous les blocs seront alignés strictement au milieu. Et leur position ne changera pas quelle que soit la taille de la fenêtre du navigateur. Voici à quoi ressemble le centrage vertical d’un div :

    Dans l'exemple suivant, nous avons utilisé un certain nombre de nouvelles propriétés CSS pour centrer les calques à l'intérieur d'un conteneur :

    #container ( largeur : 450 px ; hauteur : 150 px ; marge : 0 auto ; couleur d'arrière-plan : #66CCFF ; ) #left ( largeur : 100 px ; hauteur : 100 px ; arrière-plan : rgb(255,51,102); affichage : bloc en ligne ; alignement vertical : milieu ; marge gauche : 35 px ; ) #right ( largeur : 100 px ; hauteur : 100 px ; arrière-plan : rgb(0,255,153) ; affichage : bloc en ligne ; alignement vertical : milieu ; marge gauche : 35 px ; ) #center ( largeur : 100 px ; hauteur : 100 px ; arrière-plan : rgb(255,0,0) ; affichage : bloc en ligne ; alignement vertical : milieu ; marge gauche : 35 px ; )

    Une brève description des propriétés CSS et de leurs valeurs que nous avons utilisées dans cet exemple pour centrer un div au sein d'un div :

    • display : inline-block – aligne un élément de bloc sur une ligne et garantit qu'il s'enroule autour d'un autre élément ;
    • vertical-align : middle – aligne l'élément au milieu par rapport au parent ;
    • margin-left – définit la marge gauche.
    Comment faire un lien à partir d'un calque

    Aussi étrange que cela puisse paraître, c’est possible. Parfois, un bloc div comme lien peut être nécessaire lors de la présentation de différents types de menus. Regardons un exemple pratique d'implémentation d'une couche de liaison :

    #layer1( largeur : 500 px ; hauteur : 100 px ; arrière-plan : rgb(51 255 204) ; bordure : groove ; ) a ( affichage : bloc ; alignement du texte : centre ; hauteur : 100 % ; couleur : rgb (255,0,51) ; ) Lien vers notre site Internet

    Dans cet exemple, en utilisant la ligne display: block, nous définissons le lien sur la valeur d'un élément block. Et pour que toute la hauteur du bloc div devienne un lien, définissez height : 100%.

    Masquer et afficher les éléments de bloc

    Les éléments de bloc offrent plus de possibilités d'étendre les fonctionnalités de l'interface que la disposition tabulaire obsolète. Il arrive souvent que le design d’un site Web soit unique et reconnaissable. Mais pour une telle exclusivité, il faut payer avec un manque d'espace libre.

    Cela est particulièrement vrai pour la page principale, sur laquelle le coût de la publicité est le plus élevé. Par conséquent, le problème se pose de savoir où « pousser » une autre bannière publicitaire. Et ici, vous ne pouvez pas vous en sortir en alignant le div au centre de la page !

    Une solution plus rationnelle consiste à masquer certains blocs. Voici un exemple simple d’une telle implémentation :

    #layer1( display:block; largeur: 500px; hauteur: 100px; background: rgb(51,255,204); border:groove; ) function show() ( if(layer1=="none") ( layer1="block"; ) else ( layer1="none"; ) document.getElementById("layer1").style.display=layer1 )

    C'est le bouton magique. En cliquant dessus, vous masquerez ou afficherez le bloc masqué.

    Dans cet exemple, l'emplacement des blocs div ne change en rien. Cela utilise une simple fonction JavaScript qui modifie la valeur de la propriété d'affichage CSS après avoir cliqué sur un bouton (événement onclick).

    CSS - Mise en page et alignement central des pages d'un site Web La mise en page et l'alignement central des pages d'un site Web sont un effort créatif et causent souvent des difficultés aux débutants. Voyons donc comment procéder. Disons que nous voulons créer une page avec la structure suivante :

    Notre page se compose de quatre blocs : en-tête, menu, contenu et pied de page. Pour centrer la page, nous placerons ces quatre blocs en un seul bloc principal :

    En-tête du site

    Contenu

    En bas du site

    En utilisant cette structure comme exemple, nous envisagerons plusieurs options.

    Aménagement et centrage d'un chantier d'hévéa

    Lors de l'aménagement d'un site de caoutchouc, la principale unité de mesure utilisée est -%, car le site doit s'étendre sur toute la largeur et occuper tout l'espace libre.

    Par conséquent, la largeur des blocs « en-tête » et « pied de page » sera de 100 % de la largeur de l’écran. Laissez la largeur du bloc "menu" être de 30 % et le bloc "contenu" doit être situé à côté du bloc "menu", c'est-à-dire il doit avoir une marge gauche (margin-left) d'une largeur égale à la largeur du bloc "menu", c'est-à-dire 30%.

    Pour que les blocs "menu" et "contenu" soient côte à côte, faisons flotter le bloc "menu" et poussons-le vers le bord gauche. Nous définirons également les couleurs d’arrière-plan de nos blocs. Écrivons maintenant tout cela dans la feuille de style (sur la page style.css)

    #header( arrière-plan :#3e4982 ; largeur :100 % ; hauteur :110 px ; alignement du texte :centre ; couleur :#FFFFFF ; taille de police :24 px ; padding-top :40px ; ) #menu( arrière-plan :#6173cb ; float :left; width:300px; text-align:center; font-size:18px; #content(background:#ffffff; margin-left:30% ; height:300px; text-align:center; ) #footer(arrière-plan : # 3e4982 ; clair : les deux ; largeur : 100 % ; hauteur : 50 px ; texte-align : centre ; couleur : #FFFFFF ;

    La hauteur des blocs a été fixée de manière conditionnelle pour que le résultat soit visible. Regardez notre page dans votre navigateur :

    Si vous modifiez la taille de la fenêtre du navigateur, la largeur de tous les blocs changera. Ce n'est pas toujours pratique, car... Lorsque le bloc de menu est étiré, un espace vide apparaît. Par conséquent, la largeur du bloc « menu » est souvent fixe, alors faisons de même. Pour cela, remplacez les valeurs des propriétés correspondantes dans la feuille de style :

    ... #menu( background:#6173cb; float:left; width:200px; height:300px; ) #content( background:#ffffff; margin-left:200px; height:300px; ) ...

    Désormais, notre page s'étire plus naturellement. Avec une mise en page fluide, les pages occupent toute la largeur de l’écran, l’alignement des pages n’est donc pas nécessaire.

    Mais si vous le souhaitez, vous pouvez faire en sorte que votre page ait un remplissage égal à gauche et à droite de l'écran. Pour ce faire, vous devez ajouter un style au bloc « principal », qui est un conteneur pour tous les autres blocs :

    Maintenant, notre page ressemble à ceci :

    Aménagement et centrage du site, largeur fixe

    Dans ce cas, nous devrons définir des tailles fixes pour nos blocs :

    #main( width:800px; ) #header( background:#3e4982; width:800px; height:150px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; ) #menu ( arrière-plan : #6173cb ; float : gauche ; largeur : 200 px ; hauteur : 300 px ; texte-align : centre ; couleur : #FFFFFF ; taille de police : 18px ; padding-top : 10px ; ) #content( background :#ffffff ; margin-left:200px; height:300px; text-align:center; ) #footer( background:#3e4982; clear:both; width:800px; height:50px; text-align:center; couleur:#FFFFFF; font- taille : 14 px ; remplissage supérieur : 10 px ;

    Maintenant, notre page est pressée contre le bord gauche de l'écran.

    Dans ce cas, l'alignement central des pages du site peut être effectué comme suit. Rappelons que notre page possède une balise "body", à laquelle on peut également attribuer une largeur et un certain remplissage.

    Faisons ceci : donnez à la balise "body" une largeur de 800 pixels (comme le bloc "main") et un padding-left de 50%. Ensuite, tout le contenu du bloc "principal" sera affiché sur le côté droit de l'écran (c'est-à-dire du milieu vers la droite) :

    Pour que notre bloc « principal » soit situé au milieu de l'écran, son milieu doit coïncider avec le milieu de la balise « body ». Ceux. vous devez décaler le bloc "principal" vers la gauche de la moitié de sa taille. La largeur du bloc "principal" est de 800 pixels, ce qui signifie que vous devez lui définir la propriété "margin-left:-400px". Oui, cette propriété peut prendre des valeurs négatives, alors la marge gauche est réduite (c'est-à-dire décalée vers la gauche). Et c'est exactement ce dont nous avons besoin.

    La feuille de style ressemble désormais à ceci :

    body( largeur:800px; padding-left:50%; ) #main( width:800px; margin-left:-400px; ) #header( background:#3e4982; largeur:800px; hauteur:150px; text-align:center ; couleur:#FFFFFF; taille de police:24px; padding-top:40px; ) #menu( arrière-plan:#6173cb; float:gauche; largeur:300px; texte-align:center; couleur:#FFFFFF; taille de police: 18px; padding-top: 10px; ) #content( background:#ffffff; margin-left:200px; height:300px; text-align:center; ) #footer( background:#3e4982; clear:both; largeur : 800 px ; alignement du texte : centre ; taille de police : 14 px ;

    Et notre page dans le navigateur se situe exactement au milieu :

    Nous avons examiné deux options pour centrer les pages du site ; en fait, elles ne constituent pas un dogme. Vous pouvez expérimenter et créer votre propre version, vérifiez simplement son fonctionnement dans différents navigateurs. Malheureusement, ce qui s'affiche bien dans FireFox ou Opera peut s'afficher de manière totalement incompréhensible dans IE et vice versa. Et nous devons nous en souvenir.

    Bonne chance à vous dans votre quête créative !

    

    Si vous avez trouvé ce site utile, veuillez consulter nos autres



    Nous vous recommandons de lire