Il semblerait qu'il n'y ait rien de difficile à mettre une image ou un texte au centre de la fenêtre du navigateur. Nous utilisons la balise CENTER et tout se met en place là où nous l'avions prévu. Cependant, tout n'est pas si simple. Il existe trois façons de centrer l'alignement, chacune ayant ses propres caractéristiques et différences dans différents navigateurs.

L'une des balises les plus simples et les plus pratiques - CENTER est conçue pour aligner un bloc de texte. Cette balise peut également être utilisée pour centrer des figures et des tableaux. L'exception concerne les éléments ou dont l'alignement est défini par les propriétés de la balise IMG. Ainsi, si nous plaçons un élément à l'intérieur de la balise CENTER, l'image sera alignée à droite.

Exemple 4.1. Centrage avec la balise CENTER

Ce texte sera aligné au centre de la fenêtre du navigateur, et le texte sous-jacent
dessin sur le côté droit.

Formellement, CENTER ne doit être utilisé que comme paramètre pour d'autres balises de bloc (P, PRE et autres). Cependant, dans le navigateur Netscape Navigator 2.0, CENTER a été introduit en tant que balise autonome. Cet ajout visait à supprimer le rembourrage vertical supplémentaire qui apparaît lors de l'utilisation de balises de bloc. Si au lieu de la balise CENTER le texte est placé à l'intérieur d'un paragraphe (

) , un espacement vertical supplémentaire apparaît entre la ligne horizontale et ce texte.

CENTER ne fait pas partie de la spécification HTML. Dans "officiel" Formatage HTML, tels que l'alignement du texte doit être effectué via les attributs de balise (par exemple,

) ou en utilisant des styles. Néanmoins, cette balise a gagné le droit d'exister. Cependant, depuis la publication de la spécification HTML 4 W3, le Consortium a recommandé d'éviter l'utilisation de la balise CENTER, et que l'élément

, comme le montre l'exemple 4.2.

Exemple 4.2. Centrage avec une balise DIV

---

Une autre façon de centrer consiste à utiliser des styles. Les styles sont des instructions qui vous permettent de contrôler les attributs de mise en forme tels que la police, la couleur, l'alignement, etc. Un exemple de redéfinition de la balise P pour centrer le texte.

Exemple 4.3. Centrage avec les styles

Maintenant, quand vous utiliserez la balise P avec ce qui précède
style, le texte du paragraphe sera aligné au centre de la fenêtre du navigateur

En CSS, certaines choses apparemment simples s'avèrent moins 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 vous aideront à 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 - Aligner le bloc au centre

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

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

• Chrome 4.0+
• Firefox 3.6+
• Internet Explorer 9+
• Opéra 10.5+
• Safari 3.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 = - largeur / 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 pourcentage.

Parent ( position : relative ; ) .child ( position : absolue ; /* largeur et hauteur de la 2 case 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 horizontal d'un élément de bloc (affichage : bloc) par rapport à un autre (dans lequel il se trouve) :

Bloquer ( margin-left : auto; margin-right : 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. Alignement horizontal d'un élément inline (display : inline) ou inline-block (display : 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 (display: inline , display: inline-block) par rapport à l'autre (dans lequel il se trouve) au centre. La boîte parent dans cet exemple a une hauteur fixe, qui est définie à l'aide de la propriété CSS line-height .

Parent ( line-height : 500px ; ) .child ( display : inline-block ; vertical-align : middle ; )

Navigateurs prenant en charge cette solution :

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

2. Centrage vertical d'un bloc par rapport à un autre en présentant le parent comme un tableau, et l'enfant comme une cellule de ce tableau.

Parent ( display: table; ) .child ( display: table-cell; vertical-align: middle; )

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, veuillez les partager dans les commentaires.

L'alignement horizontal du contenu qui a une propriété flottante peut être fait très facilement et est également complètement inter-navigateur (fonctionne dans Opera 8+, Firefox 3+, IE 5.5+).

exemple d'alignement de bloc div

Pour aligner une boîte flottante ou plusieurs boîtes empilées, une autre boîte extérieure est nécessaire. La case extérieure et les cases intérieures ont une position assignée : absolue ; et flotteur : gauche ; , assignation externe à gauche : 50 % ; , et pour les blocs intérieurs à droite : 50 % ; . Pour utiliser float : right; vous devez attribuer un droit d'attribution externe : 50 % ; , et blocs intérieurs à gauche : 50 % ; . Je recommande d'effacer le flottant en plaçant un bloc avec la propriété clear: both ; after the center-aligned elements; .

De cette façon, vous pouvez obtenir le centrage suivant :

Le bloc intérieur avec id = block-inner a une bordure verte, le bloc extérieur avec id = block a une bordure rouge pointillée.

#block ( position : relative ; float : gauche ; gauche : 50 % ; border : 1px dashed #a00 ; ) #block-inner ( position : relative ; float : gauche ; droite : 50 % ; border : 2px solid #0a0 ; rembourrage : 10px; ) #page ( débordement : masqué ; )

Exemple d'alignement d'élément de menu

En pratique, l'exemple ci-dessus peut être appliqué lorsque le menu du site est aligné horizontalement. Cependant, il faut tenir compte du fait qu'à un niveau suffisant en grand nombreéléments (plus de la moitié de la largeur de la page), le défilement horizontal apparaît. Pour vous en débarrasser, vous devez appliquer la propriété overflow dans le bloc externe. Si le menu est déroulant, ses éléments déroulants peuvent être coupés par ce bloc externe. Pour éviter ce problème, il faut appliquer la propriété overflow au bloc le plus englobant possible, par exemple au unité extérieure A qui enveloppe tout le contenu de la page.

Par exemple, vous pouvez aligner le menu comme ceci :

Les éléments li de la liste ul ont une bordure verte et la liste ul a une bordure rouge en pointillés.

Le code HTML de l'exemple ci-dessous ressemble à ceci :

Le code CSS de l'exemple ci-dessous ressemble à ceci :

#menu ( position : relative ; float : gauche ; gauche : 50 % ; border : 1px dashed #a00 ; list-style : none ; margin : 0 ; padding : 0 ; ) #menu li ( position : relative ; float : left ; droite : 50 % ; bordure : 2 px solide #0a0 ; rembourrage : 10 px ; ) #page ( débordement : masqué ; )

C'est donc assez simple. Je vous souhaite de réussir dans la maîtrise de nouvelles méthodes.

les fenêtres: Internet Explorer 3.0+, Firefox 1.0+, Google Chrome, Opera 3.51 - 6.xx et 9.0+, Safari 3.1+, SeaMonkey 1.0+ [ 1 ] .

linux: Firefox 1.0+, Chromium, Opera 5.0 - 6.xx et 9.0+, SeaMonkey 1.0+ [ 2 ] .

Alignement du contenu de la page au centre dans la zone visible de la fenêtre du navigateur en utilisant HTML - pas de CSS. Le conteneur dans lequel le contenu de la page Web sera situé est centré - en largeur et en hauteur : [ Ouvrir la page d'exemple ].

Et aussi dans Netscape 2.02 - 4.80 et Offbyone. Dans Netscape 2.02 - 4.80, il y a un décalage du contenu de la page vers le coin supérieur gauche de la zone visible de la fenêtre du navigateur en raison du fait que ces programmes réservent de l'espace pour les barres de défilement.

Et aussi dans Netscape 2.02 - 4.80. Dans Netscape 2.02 - 4.80, il y a un décalage du contenu de la page vers le coin supérieur gauche de la zone visible de la fenêtre du navigateur en raison du fait que ces programmes réservent de l'espace pour les barres de défilement.

Aliosque subditos et thema

Afin de prendre des captures d'écran sous DOS, il existe plusieurs programmes. Par exemple, SNARF. Avec l'utilisation de cette application, il a été possible de prendre des captures d'écran dans le plus grand nombre de cas. De plus, la qualité des captures d'écran (fichiers .BMP) réalisées par SNARF est la meilleure parmi les programmes testés : ScreenThief, VideoThief, FLIP, GRABBER, SNARF. L'utilisation de SNARF avec les paramètres par défaut est simple, mais il y a un inconvénient - SNARF enregistre toujours la capture d'écran dans le dossier où se trouve actuellement l'utilisateur. Ce qui peut être gênant ou inacceptable. Et il n'y a aucun moyen évident de changer cela. Cependant, il existe une solution de contournement. L'idée originale a été trouvée sur ce lien. Sur la base de quoi ce qui suit s'est produit : 1. SNARF [ Télécharger ] 2. Utilisation éditeur de texte ouvrez le fichier SNARF.EXE en mode texte, recherchez snarf000.bmp et remplacez-le par le dossier s: scn000.bin où les captures d'écran seront enregistrées lorsque SNARF est en cours d'exécution. Le dossier et le chemin d'accès peuvent être n'importe lesquels : C:\SOFT\SNARF.EXE SUBST S : C:\SCREENS\ 4. Exécutez SNARF : S [ou S.BAT] 5. Pour prendre une capture d'écran : Alt + S Il y aura être deux signal sonore. Le premier au début et le second comme signe de la réussite du processus. Une fois les captures d'écran prises, vous devez accéder au dossier où elles sont enregistrées et modifier l'extension de fichier de .BIN à .BMP SNARF - Freeware.

L'alignement vertical CSS d'un élément de bloc contenant du texte et des images. Fonctionne pour différentes combinaisons d'éléments en bloc et en ligne. Exemple : Alignement vertical CSS Alignement vertical CSS HTML / XHTML. Le code:

CSS. Code : .parent (position : relative ; gauche : 0px ; haut : 0px ; hauteur : 200px ; affichage : table ;) .child (position : relative ; gauche : 0px ; haut : 0px ; affichage : table-cell ; alignement vertical : middle;) .childcontent (position : relative ; left : 0px ; top : 0px ;) L'alignement CSS a fonctionné, .child devrait être sans "float : gauche ;". [ 1 ] Aussi dans Netscape 6.01+, Mozilla 0.6+. [ 2 ] Aussi dans Netscape 6.01+, Mozilla 0.6+.

L'alignement du texte le définit apparence et l'orientation des bords du paragraphe, et peut être à gauche, à droite, centré ou justifié. En tableau. 1 montre les options d'alignement du bloc de texte.

Languette. 1. Façons d'aligner le texte

Alignement à gauche	Alignement à droite	Alignement central	Justifier
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.		Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

L'option la plus courante est alignée à gauche, lorsque le texte de gauche est décalé vers le bord, tandis que le droit reste irrégulier. L'alignement à droite et au centre est principalement utilisé dans les titres et les sous-titres. Il convient de garder à l'esprit que lors de l'utilisation de la justification dans le texte, de grands intervalles peuvent apparaître entre les mots, ce qui n'est pas très beau.

La balise de paragraphe est généralement utilisée pour définir l'alignement du texte.

Avec l'attribut align, qui spécifie la méthode d'alignement. Il est également permis d'aligner un bloc de texte à l'aide de la balise