Très souvent, la tâche consiste à aligner le bloc au centre de la page / de l'écran, et même sans script java, sans définir de tailles dures ni d'indentations négatives, de sorte que les barres de défilement fonctionnent sur le parent si le bloc dépasse sa taille. Il existe de nombreux exemples monotones sur le net de la façon d'aligner un bloc au centre de l'écran. En règle générale, la plupart d'entre eux sont basés 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 de résultat dans les exemples aux liens indiqués.
Option 1. Rembourrage négatif.
Positionnement bloquer attributs haut et gauche de 50 %, et connaissant à l'avance la hauteur et la largeur du bloc, définissez une marge négative, qui est égale à la moitié de la taille bloquer. Un énorme inconvénient de cette option est que vous devez compter les retraits négatifs. De la même façon bloquer ne se comporte pas tout à fait correctement dans l'environnement des barres de défilement - il est simplement coupé car il a des retraits négatifs.
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 max : 100 % ; hauteur : automatique ; affichage : bloc ; marge : 0 automatique; bordure : aucune ; ) )
Option 2 : Retrait automatique.
Moins courant, mais semblable au premier. Pour bloquer définissez la largeur et la hauteur, positionnez les attributs en haut à droite en bas à gauche sur 0 et définissez la marge auto. L'avantage de cette option est les barres de défilement de travail parent, si ce dernier a 100% de largeur et de hauteur. L'inconvénient de cette méthode est le dimensionnement rigide.
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 : automatique ; img ( largeur maximale : 100 % ; hauteur : automatique ; affichage : bloc ; marge : 0 automatique ; bordure : aucune ; ) )
Option 3. Tableau.
Nous demandons parent styles de tableau, cellule parent Définissez l'alignement du texte au centre. MAIS bloc définir le modèle de bloc en ligne. Les inconvénients ne fonctionnent pas les barres de défilement, et en général, pas l'esthétique de "l'émulation" de la table.
Parent ( largeur : 100 % ; hauteur : 100 % ; affichage : table ; position : absolu ; haut : 0 ; gauche : 0 ; > .inner ( affichage : table-cell ; text-align : centre ; vertical-align : milieu ; ) ) .block ( affichage : bloc en ligne ; img ( affichage : bloc ; bordure : aucune ; ) )
Pour ajouter un parchemin à cet exemple, vous devrez ajouter un élément supplémentaire à la structure.
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 tâches d'origine. Le but est d'avoir parent définir des styles pseudo-élément avant, à savoir hauteur 100%, alignement central et modèle de boîte en ligne. Même avec bloquer mettre le modèle du bloc en ligne, alignement central. À bloquer n'est pas tombé sous pseudo-élément lorsque les dimensions du premier sont supérieures à parent, précisez parent white-space : nowrap et font-size : 0 après quoi y bloquer annulez ces styles avec ce qui suit - espace blanc : normal. À cet exemple font-size: 0 est nécessaire pour supprimer l'espace résultant entre parent et bloquer en rapport avec le formatage du code. L'écart peut être supprimé par d'autres moyens, mais il est préférable de ne pas le permettre.
Parent ( largeur : 100 % ; hauteur : 100 % ; position : absolue ; haut : 0 ; gauche : 0 ; débordement : auto ; espace blanc : nowrap ; alignement du texte : centre ; taille de la police : 0 ; &:before ( hauteur : 100 % ; affichage : bloc en ligne ; alignement vertical : milieu ; contenu : " ; ) ) .block ( affichage : bloc en ligne ; espace blanc : normal ; alignement vertical : milieu ; alignement du texte : gauche ; img ( affichage : bloc ; bordure : aucune ; ) )
Ou, si vous voulez que le parent n'occupe que la hauteur et la largeur de la fenêtre, pas 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 la police : 0 ; &:before ( hauteur : 100 % ; affichage : bloc en ligne ; alignement vertical : milieu ; contenu : "" ; ) ) .block ( affichage : bloc en ligne ; espace blanc : normal ; alignement vertical : milieu ; alignement du texte : gauche ; img ( affichage : bloc ; bordure : aucune ; ) )
Option 5. Boîte flexible.
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 présente une grande flexibilité. La seule chose à retenir lors du choix cette méthode- 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 ; align-items : center ; align-content : center ; justifier-content : center ; overflow : 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 le bloc doit être aligné d'une manière ou d'une autre. CSS viendra à la rescousse fonction de traduction() . Une valeur de 50 % de position absolue positionnera le coin supérieur gauche de la boîte exactement au centre, puis une valeur de translation négative déplacera la boîte par rapport à ses propres dimensions. Veuillez noter que des effets négatifs peuvent apparaître sous la forme de bords flous ou de style de police. De plus, une méthode similaire peut entraîner des problèmes de calcul de la position du bloc à l'aide de java-script "a. Parfois, pour compenser la perte de 50 % de la largeur due à utilisation de css la propriété left peut être aidée par la règle définie pour le bloc : margin-right : -50 % ; .
Parent ( largeur : 100 % ; hauteur : 100 % ; position : fixe ; haut : 0 ; gauche : 0 ; débordement : auto ; ) .block ( position : absolue ; haut : 50 % ; gauche : 50 % ; transformation : translate( -50%, -50%); img ( affichage : bloc ; ) )
Option 7. Bouton.
Option utilisateur où bloquer enveloppé dans une étiquette de bouton. Le bouton a la capacité de centrer tout ce qui se trouve à l'intérieur, à savoir les éléments du modèle ligne et bloc-ligne (bloc en ligne). Je ne le recommande pas en pratique.
Parent ( largeur : 100 % ; hauteur : 100 % ; position : absolue ; haut : 0 ; gauche : 0 ; débordement : auto ; arrière-plan : aucun ; bordure : aucun ; contour : aucun ; ) .block ( affichage : bloc en ligne ; img ( affichage : bloc ; ; bordure : aucune ; ) )
Prime
En utilisant l'idée de la 4ème option, vous pouvez définir des marges pour bloquer, et en même temps ce dernier sera correctement affiché dans l'environnement des 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 parent, mettez-le à l'échelle parent.
Exemple : jsfiddle.net/serdidg/nfqg9rza/3 .
Exemple de grande image :
Alignement du texte verticalement en CSS- un travail très difficile. J'ai vu suffisamment de personnes se débattre avec cela et je continue de trouver des bogues "critiques" en matière de conception réellement réactive.
Mais n'ayez crainte : si vous rencontrez déjà des difficultés avec l'alignement vertical CSS, vous êtes au bon endroit.
Parlons de la propriété d'alignement vertical CSS
Lorsque j'ai commencé à travailler dans le domaine du développement web, j'ai un peu souffert de cette propriété. Je pensais que cela devrait fonctionner comme une propriété classique " aligner le texte". Ah, si seulement c'était si simple...
Propriété CSS d'alignement vertical fonctionne bien avec les tables mais pas avec les divs ou d'autres éléments. Lorsque vous l'utilisez sur un div , il aligne l'élément avec d'autres blocs, mais pas son contenu. Dans ce cas, la propriété ne fonctionne qu'avec display: inline-block; .
Voir exemple
Nous voulons centrer le contenu, pas la div elle-même !
Vous avez deux options. Si vous n'avez que des divs avec du texte, vous pouvez utiliser la propriété line-height. Cela signifie que vous devez connaître la hauteur de l'élément, mais vous ne pouvez pas la définir. De cette façon, votre texte sera toujours au centre.
La vérité de cette approche Alignement vertical CSS il y a un inconvénient. Si le texte est multiligne, la hauteur de ligne sera multipliée par le nombre de lignes. Très probablement, dans ce cas, vous vous retrouverez avec une page terriblement conçue.
Jetez un oeil à cet exemple
Si le contenu que vous souhaitez centrer comporte plus d'une ligne, il est préférable d'utiliser des divs de table. Vous pouvez également utiliser des tableaux, mais ce n'est pas sémantiquement correct. Si vous avez besoin de pauses à des fins réactives, il est préférable d'utiliser des éléments div.
Pour que cela fonctionne, il doit y avoir un conteneur parent avec display: table , et à l'intérieur - La bonne quantité les colonnes que vous souhaitez centrer avec display: table-cell et vertical-align: middle .
Voir exemple
Pourquoi cela fonctionne-t-il avec la mise en page de table mais pas avec les éléments div ? Parce que les lignes du tableau ont la même hauteur. Lorsque le contenu d'une cellule de tableau n'utilise pas tout l'espace de hauteur disponible, le navigateur ajoute automatiquement un rembourrage vertical pour centrer le contenu.
propriété de position
Commençons par les bases de l'alignement vertical CSS div :
- position : statique est la valeur par défaut. L'élément est rendu selon l'ordre HTML ;
- position : absolue - utilisée pour déterminer la position exacte d'un élément. Cette position est toujours associée à l'élément parent le plus proche positionné relativement (pas statique). Si vous ne déterminez pas la position exacte d'un élément, vous en perdrez le contrôle. Il sera rendu de manière aléatoire, ignorant complètement le flux de documents. Par défaut, l'élément est affiché dans le coin supérieur gauche ;
- position : relative - utilisée pour positionner un élément par rapport à sa position normale (statique). Cette valeur préserve l'ordre du flux de documents ;
- position : fixe - utilisé pour positionner l'élément par rapport à la fenêtre du navigateur afin qu'il soit toujours affiché dans la fenêtre d'affichage.
Remarque : certaines propriétés ( top et z-index) ne fonctionnent que si l'élément est défini sur position (pas statique).
Nous allons passer aux choses sérieuses!
Voulez-vous mettre en œuvre Alignement vertical CSS au centre? Créez d'abord un élément avec une position et des dimensions relatives. Par exemple : 100 % en largeur et en hauteur.
La deuxième étape peut être différente selon les navigateurs cibles, mais l'une des deux options peut être utilisée :
- Propriété ancienne : Besoin de connaître la taille exacte de la fenêtre afin d'enlever la moitié de la largeur et la moitié de la hauteur. Voir exemple;
- Nouvelle propriété CSS3 : Vous pouvez ajouter une propriété de transformation avec une valeur de traduction de 50 % et le bloc sera toujours au centre. Voir l'exemple.
En gros, si vous voulez centrer le contenu, ne jamais utiliser le haut : 40 % ou à gauche : 300px . Cela fonctionne très bien sur les écrans de test, mais ce n'est pas centré.
Rappelez-vous la position : fixe ? Vous pouvez faire la même chose avec lui qu'avec la position absolue, mais vous n'avez pas besoin d'une position relative pour l'élément parent - il se positionnera toujours par rapport à la fenêtre du navigateur.
Avez-vous entendu parler de la spécification flexbox ?
Vous pouvez utiliser flexbox . C'est bien mieux que toute autre option. alignement du texte par centre css verticalement. Avec flexbox, la gestion des éléments est un jeu d'enfant. Le problème est que certains navigateurs comme IE9 et ci-dessous doivent être supprimés. Voici un exemple de comment centrer verticalement un bloc :
Voir l'exemple
En utilisant la disposition Flexbox, vous pouvez centrer plusieurs boîtes.
Si vous appliquez ce que vous avez appris de ces exemples, vous serez en mesure de maîtriser CSS aligner le bloc verticalement dès que possible.
Liens et lectures complémentaires
Apprendre le balisage CSS
Grenouille FlexBox
bac à sable flexible
Traduction de l'article " Alignement vertical CSS pour tout le monde (mannequins inclus)» a été préparé par une sympathique équipe de projet.
Lors de la mise en page d'une page, il est souvent nécessaire d'effectuer un alignement centré à la manière CSS : par exemple, centrer le bloc principal. Il existe plusieurs options pour résoudre ce problème, chacune devant être utilisée tôt ou tard par tout concepteur de mise en page.
Alignement du texte au centre
Souvent, à des fins décoratives, il est nécessaire de définir l'alignement du texte au centre, CSS dans ce cas permet de réduire le temps de mise en page. Auparavant, cela se faisait à l'aide d'attributs HTML, mais désormais, la norme exige que le texte soit aligné à l'aide de feuilles de style. Contrairement aux blocs, qui nécessitent de modifier les marges, en CSS, l'alignement du texte est centré sur une seule ligne :
- text-align:center;
Cette propriété est héritée et transmise du parent à tous les enfants. Affecte non seulement le texte, mais également d'autres éléments. Pour ce faire, ils doivent être inline (par exemple, span) ou inline-block (tous les blocs dont la propriété display: block est définie). Cette dernière option vous permet également de modifier la largeur et la hauteur de l'élément, d'ajuster les retraits de manière plus flexible.
Souvent sur les pages, l'alignement est attribué à la balise elle-même. Cela rend immédiatement le code invalide, car le W3C a déprécié l'attribut align. L'utiliser sur une page n'est pas recommandé.
Aligner un bloc au centre
Si vous devez définir alignement div centré, CSS a beaucoup à offrir moyen pratique: utiliser les marges de marge. Les retraits peuvent être définis à la fois pour les éléments de bloc et les éléments de bloc en ligne. La valeur de la propriété doit prendre les valeurs 0 (retraits verticaux) et auto (retraits horizontaux automatiques) :
- marge : 0 automatique ;
Maintenant, cette option est reconnue comme absolument valide. L'utilisation des marges permet également de définir l'alignement de l'image au centre : cela permet de résoudre de nombreux problèmes liés au positionnement d'un élément sur une page.
Aligner le bloc à gauche ou à droite
Parfois, le centrage à la manière CSS n'est pas nécessaire, mais vous devez mettre deux blocs côte à côte : l'un sur le bord gauche, l'autre sur la droite. Pour ce faire, il existe une propriété float, qui peut prendre l'une des trois valeurs suivantes : left, right ou none. Disons que vous avez deux blocs qui doivent être placés côte à côte. Ensuite, le code ressemblera à ceci :
- .gauche (float:gauche;)
- .right(float:right)
S'il existe également un troisième bloc, qui doit être situé sous les deux premiers blocs (par exemple, un pied de page), il doit alors définir la propriété clear :
- .gauche (float:gauche;)
- .right(float:right)
- pied de page (effacer : les deux)
Le fait est que les blocs avec des classes à gauche et à droite sortent du flux général, c'est-à-dire que tous les autres éléments ignorent l'existence même des éléments alignés. La propriété clear:both permet au pied de page ou à tout autre bloc de voir les éléments qui sont tombés hors du flux et désactive l'habillage (flotteur) à la fois à gauche et à droite. Par conséquent, dans notre exemple, le pied de page se déplacera vers le bas.
Alignement vertical
Il y a des cas où il ne suffit pas de définir l'alignement central de manière CSS, vous devez également modifier la position verticale du bloc enfant. Tout élément inline ou inline-block peut être aligné sur le bord supérieur ou inférieur, être au milieu d'un élément parent ou être dans une position arbitraire. Le plus souvent, un bloc doit être centré, ce qui est fait en utilisant l'attribut vertical-align. Disons qu'il y a deux blocs, l'un imbriqué dans l'autre. Dans ce cas, le bloc interne est un élément inline-block (affichage : inline-block). Vous devez aligner le bloc enfant verticalement :
- alignement supérieur - .child(vertical-align:top);
- alignement central - .child(vertical-align:middle);
- alignement bas - .child(vertical-align:bottom);
Les éléments de niveau bloc ne sont pas affectés par text-align ou vertical-align.
Problèmes possibles avec les blocs alignés
Parfois, le centrage d'un div à la manière du CSS peut causer de petits problèmes. Par exemple, lors de l'utilisation de float : disons qu'il y a trois blocs : .first, .second et .third. Les deuxième et troisième blocs se trouvent dans le premier. L'élément de classe seconde est aligné à gauche et le dernier bloc est aligné à droite. Après l'alignement, les deux sont tombés hors du ruisseau. Si l'élément parent n'a pas de hauteur définie (par exemple, 30em), il ne s'étirera plus à la hauteur des blocs enfants. Pour éviter cette erreur, ils utilisent un "spacer" - un bloc spécial qui voit .second et .third. Code CSS :
- .seconde(float :gauche)
- .troisième (flotteur : droite)
- .clearfix(hauteur : 0 ; effacer : les deux ;)
La pseudo-classe :after est souvent utilisée, ce qui permet également de remettre des blocs en place en créant un pseudo espaceur (dans l'exemple, le div avec la classe conteneur se trouve à l'intérieur de .first et contient .left et .right) :
- .gauche(float:gauche)
- .right(float:right)
- .container:after(content:""; display:table; clear:both;)
Les options ci-dessus sont les plus courantes, bien qu'il existe plusieurs variantes. Vous pouvez toujours trouver le moyen le plus simple et le plus pratique de créer un pseudo espaceur par l'expérimentation.
Un autre problème auquel les concepteurs de mise en page sont souvent confrontés est l'alignement des éléments de bloc en ligne. Un espace est automatiquement ajouté après chacun d'eux. La propriété margin, qui est définie sur une marge négative, aide à faire face à cela. Il existe d'autres moyens beaucoup moins utilisés : par exemple, la mise à zéro Dans ce cas, font-size:0 est écrit dans les propriétés de l'élément parent. S'il y a du texte à l'intérieur des blocs, la taille de police requise est déjà renvoyée dans les propriétés des éléments du bloc en ligne. Par exemple, font-size:1em. La méthode n'est pas toujours pratique, donc l'option avec des retraits externes est beaucoup plus souvent utilisée.
L'alignement des blocs permet de créer des pages belles et fonctionnelles : il s'agit de la mise en page de la mise en page générale, de l'emplacement des marchandises dans les boutiques en ligne, et des photos sur un site de carte de visite.
Bonjour, abonnés et lecteurs de cette publication. Aujourd'hui, je veux entrer dans les détails et vous dire comment centrer du texte en CSS. Dans certains articles précédents, j'ai indirectement abordé ce sujet, vous avez donc quelques connaissances dans ce domaine.
Cependant, dans cet article, je vais vous parler de toutes sortes de façons d'aligner des objets, ainsi que d'expliquer comment indenter et souligner les paragraphes. Alors commençons à apprendre !
Html et sa progéniture et aligner
Cette méthode n'est presque jamais utilisée, car elle a été supplantée par les outils de feuille de style en cascade. Cependant, savoir qu'une telle balise existe ne vous fera pas de mal.
Quant à la validation ce terme décrit en détail dans l'article ""), alors la spécification html elle-même condamne l'utilisation < centre>, puisque pour la validité il faut utiliser un transitif DOCTYPE>.
Ce typeignore les éléments interdits.
Passons maintenant à l'attribut aligner. Il définit l'alignement horizontal des objets sur et s'adapte après la déclaration de balise. Il peut généralement être utilisé pour aligner le contenu à gauche ( la gauche), sur le côté droit ( droit), centré ( centre) et la largeur du texte ( justifier).
Ci-dessous, je vais donner un exemple dans lequel je placerai l'image et le paragraphe au centre.
Ce contenu sera centré.
Notez que pour l'image, l'attribut que nous analysons a des valeurs légèrement différentes.
Dans l'exemple que j'ai utilisé align="milieu". Grâce à cela, l'image est alignée de manière à ce que la phrase soit située exactement au milieu de l'image.
Outils de centrage CSS
Les propriétés CSS conçues pour aligner les blocs, le texte et le contenu graphique sont beaucoup plus souvent utilisées. Cela est principalement dû à la commodité et à la flexibilité de la mise en œuvre des styles.
Alors, commençons par la première propriété de centrage du texte - c'est texte-aligner.
Il fonctionne de la même manière que align in . Parmi les mots-clés, vous pouvez en choisir un dans la liste générale ou hériter des caractéristiques de l'ancêtre ( hériter).
Je tiens à noter qu'en css3, vous pouvez définir 2 paramètres supplémentaires : début– selon les règles d'écriture du texte (de droite à gauche ou inversement), fixe l'alignement à gauche ou à droite (similaire au travail de gauche ou de droite) et fin- opposé au début (lorsque vous écrivez du texte de gauche à droite, il agit comme à droite, lorsque vous écrivez de droite à gauche - gauche).
Offre à droite
Phrase utilisant la fin
Laissez-moi vous parler d'une petite astuce. Lors du choix d'une valeur justifier la dernière ligne peut pendre moche d'en bas. Pour le placer, par exemple, au centre, vous pouvez utiliser la propriété texte-aligner-dernier.
Pour aligner verticalement le contenu du site ou les cellules d'un tableau, utilisez la propriété alignement vertical. Ci-dessous, j'ai décrit les principaux mots clésélément.
| Mot-clé | objectif |
| ligne de base | Spécifie l'alignement sur la ligne ancêtre, qui est appelée la ligne de base. Si l'objet ancêtre n'a pas une telle ligne, alors l'alignement se produit le long de la bordure inférieure. |
| milieu | Le milieu de l'objet modifiable est aligné sur la ligne de base, à laquelle la hauteur floor de l'élément parent est ajoutée. |
| fond | Le bas du contenu sélectionné s'ajuste au bas de l'objet en dessous de tout. |
| Haut | Semblable au bas, uniquement avec le haut de l'objet. |
| super | Place un caractère en exposant. |
| sous | Met l'élément en indice. |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
C À E JOÀ
|
Échancrure
Et enfin, nous avons atteint l'indentation dans le paragraphe. Le langage css utilise une propriété spéciale appelée retrait du texte.
Avec lui, vous pouvez créer à la fois une ligne rouge et un rebord (vous devez spécifier une valeur négative).
Pour créer une ligne rouge, vous n'avez besoin de connaître qu'un seul paramètre.
Il s'agit d'une simple propriété d'indentation de texte.
Je félicite ceux qui ont essayé chaque exemple dans la pratique. Envoyez des liens vers mon blog à vos amis et n'oubliez pas de vous abonner. Bonne chance! Bye Bye!
Sincèrement, Roman Chueshov
Lis: 675 fois
La mise en page et l'alignement au centre des pages du site est une question créative et pose souvent des difficultés aux débutants. Alors voyons comment faire. Supposons que nous voulions créer une page avec la structure suivante :
Notre page se compose de quatre blocs : header (header), menu (menu), content (content) et le bas du site (footer). Pour centrer la page, nous allons mettre ces quatre cases dans une case principale :
En-tête du site
Contenu
bas du site
Sur l'exemple de cette structure, nous envisagerons plusieurs options.
Aménagement et centrage du site caoutchouc
Lors de l'aménagement d'un site en caoutchouc, l'unité de mesure principale utilisée est -%, car le site doit s'étendre en 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 laissez le bloc "contenu" être placé à côté du bloc "menu", c'est-à-dire il doit avoir une marge gauche (margin-left) égale à la largeur du bloc "menu", c'est-à-dire trente%.
Pour que les blocs "menu" et "contenu" soient situés côte à côte, faisons flotter le bloc "menu" et poussons-le vers le bord gauche. Nous définirons également les couleurs de fond de nos blocs. Maintenant, écrivons tout cela dans une feuille de style (dans la page style.css)
#header( background:#3e4982; width:100%; height:110px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; ) #menu( background:#6173cb; float :left; largeur:30%; hauteur:300px; text-align:center; color:#FFFFFF; font-size:18px; padding-top:10px; ) #content( background:#ffffff; margin-left:30% ; hauteur : 300 px ; text-align : center ; ) #footer( background : #3e4982 ; clear : les deux ; largeur : 100 % ; hauteur : 50 px ; text-align : center ; color:#FFFFFF ; font-size : 14 px ; padding-top : 10px ; )
La hauteur des blocs a été définie de manière conditionnelle afin que le résultat soit visible. Regardez notre page dans un navigateur :
Si vous redimensionnez la fenêtre du navigateur, la largeur de tous les blocs changera. Ce n'est pas toujours pratique, car. lors de l'étirement du bloc de menu, un espace vide apparaît. Par conséquent, le plus souvent, la largeur du bloc "menu" est fixée, procédons ainsi. 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; ) ...
Maintenant notre page s'étire plus naturellement. Avec une mise en page fluide, les pages occupent toute la largeur de l'écran, le centrage des pages n'est donc pas nécessaire.
Mais si vous le souhaitez, vous pouvez vous assurer que votre page a des retraits égaux à gauche et à droite de l'écran. Pour ce faire, vous devez ajouter un style au bloc "main", 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 les tailles fixes de nos blocs :
#main( width:800px; ) #header( background:#3e4982; width:800px; height:150px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; ) #menu ( background:#6173cb; float:left; width:200px; height:300px; text-align:center; color:#FFFFFF; font-size: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; color:#FFFFFF; font- taille : 14 px ; rembourrage supérieur : 10 px ; )
Maintenant, notre page est épinglée sur le bord gauche de l'écran.
Dans ce cas, l'alignement au centre des pages du site peut se faire comme suit. Rappelez-vous que notre page a une balise "body", qui peut également avoir une largeur et un rembourrage.
Faisons ceci : définissez la largeur de la balise "body" à 800 pixels (comme le bloc "main") et l'indentation à gauche (padding-left) à 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 "main" soit situé au milieu de l'écran, son milieu doit correspondre au milieu de la balise "body". Ceux. déplacer le bloc "principal" vers la gauche de la moitié de sa taille. La largeur du bloc "principal" est de 800 pixels, vous devez donc lui définir la propriété "margin-left:-400px". Oui, cette propriété peut prendre des valeurs négatives, auquel cas la marge de gauche est réduite (c'est-à-dire décalée vers la gauche). Et c'est exactement ce dont nous avons besoin.
Maintenant, la feuille de style ressemble à ceci :
body( width:800px; padding-left:50%; ) #main( width:800px; margin-left:-400px; ) #header( background:#3e4982; width:800px; height:150px; text-align:center ; color:#FFFFFF; font-size:24px; padding-top:40px; ) #menu( background:#6173cb; float:left; width:200px; height:300px; text-align:center; color:#FFFFFF; font-size:18px; padding-top:10px; ) #content( background:#ffffff; margin-left:200px; height:300px; text-align:center; ) #footer( background:#3e4982; clear:both; largeur : 800 px ; hauteur : 50 px ; alignement du texte : centre ; couleur : #FFFFFF ; taille de la police : 14 px ; rembourrage en haut : 10 px ; )
Et notre page dans le navigateur est située exactement au milieu :
Nous avons envisagé deux options pour centrer les pages du site, en fait, elles ne sont pas un dogme. Vous pouvez expérimenter et créer votre propre version, il suffit de vérifier son fonctionnement dans différents navigateurs. Malheureusement, ce qui s'affiche bien dans FireFox ou Opera peut être complètement incompréhensible dans IE et vice versa. Et cela doit être rappelé.
Bonne chance dans vos activités créatives !
