De l'auteur : Je vous souhaite à nouveau la bienvenue sur nos pages de blog. Dans l'article d'aujourd'hui, je voudrais parler de diverses techniques d'alignement qui peuvent être appliquées à la fois aux blocs et à leur contenu. En particulier, comment aligner les blocs en CSS, ainsi que l'alignement du texte.

Aligner les blocs au centre

Il est facile de centrer un bloc en CSS. C'est la technique la plus connue pour beaucoup, mais je voudrais en parler tout de suite, avant tout. Ceci est censé être centré horizontalement par rapport à l'élément parent. Comment est-il réalisé ? Disons que nous avons un conteneur et que notre sujet de test s'y trouve :

< div id = "wrapper" > < div id = "header" > < / div > < / div >

Supposons qu'il s'agit de l'en-tête du site. Il ne couvre pas toute la largeur de la fenêtre et nous devons le centrer. Nous écrivons ainsi :

#entête( largeur / largeur max : 800px ; marge : 0 auto ;

Nous devons spécifier la largeur exacte ou maximale, puis écrire la propriété clé - margin: 0 auto. Il définit les marges de notre en-tête, la première valeur détermine les marges du haut et du bas, et la seconde - à droite et à gauche. La valeur auto indique au navigateur de calculer automatiquement le rembourrage des deux côtés afin que l'élément soit exactement centré sur l'élément parent. À l'aise!

Alignement du texte

C'est aussi une astuce très simple. Pour aligner tous les éléments en ligne, vous pouvez utiliser la propriété text-align et ses valeurs : left, right, center. Ce dernier centre le texte, c'est ce que nous voulons. Même une image peut être alignée de la même manière, car c'est aussi un élément en ligne par défaut.

Aligner le texte verticalement

Mais c'est déjà plus difficile. Par défaut, il n'existe pas de propriété aussi simple et bien connue qui centrerait facilement le texte dans un conteneur de blocs verticalement. Cependant, il existe plusieurs astuces que les concepteurs de mise en page ont mis au point au fil des ans.

Définissez la hauteur du bloc à l'aide du rembourrage. La solution consiste à ne pas définir une hauteur explicite avec la hauteur, mais à la créer artificiellement avec des rembourrages supérieur et inférieur, qui doivent être identiques. Créons n'importe quel bloc et écrivons-y les propriétés suivantes :

div( fond : #ccc; rembourrage : 30px 0; )

div ( fond : #ccc; rembourrage : 30px 0 ;

L'arrière-plan est juste pour voir visuellement les bords ainsi que le rembourrage. Maintenant, la hauteur du bloc est composée de ces deux retraits et de la ligne elle-même, et tout ressemble à ceci :

Définissez une hauteur de ligne pour le bloc. je pense que c'est plus Le droit chemin si vous devez aligner une ligne de texte. Avec lui, vous pouvez enregistrer la hauteur normale à l'aide de la propriété height. Après cela, il doit également définir la hauteur de la ligne, identique à la hauteur du bloc dans son ensemble.

div( hauteur : 60 px ; hauteur de ligne : 60 px ; )

div ( hauteur : 60px hauteur de ligne : 60px ;

Le résultat sera similaire à l'image ci-dessus. Tout fonctionnera même si vous ajoutez du rembourrage. Cependant, seulement pour une ligne. Si vous avez besoin de plus de texte dans un élément, alors Par ici ne fonctionnera pas.

Convertir un bloc en cellule de tableau. L'essence de cette méthode est que la propriété vertical-align: middle agit sur la cellule du tableau, ce qui centre l'élément verticalement. Par conséquent, dans ce cas, le bloc doit être défini comme suit :

div( display: table-cell; vertical-align: middle; )

div ( affichage : tableau - cellule ; alignement vertical : milieu ;

Cette méthode est intéressante car vous pouvez aligner autant de texte que vous le souhaitez au centre. Mais il est préférable de définir display: table sur le bloc dans lequel notre div est imbriqué, sinon cela risque de ne pas fonctionner.

Eh bien, nous arrivons ici à la dernière astuce pour aujourd'hui - c'est l'alignement vertical des blocs eux-mêmes. Il faut dire qu'encore une fois, il n'y a pas de propriété qui soit spécifiquement destinée à cela, mais il y a quelques astuces dont vous devriez être conscient.

Définissez les décalages en pourcentage. Si vous connaissez la hauteur de l'élément parent et placez un autre élément de niveau bloc à l'intérieur, vous pouvez le centrer en utilisant un pourcentage de remplissage. Par exemple, le parent a une hauteur de 600 pixels. Vous y mettez un bloc qui a une hauteur de 300px. De combien avez-vous besoin de reculer d'en haut et d'en bas pour le centrer ? 150 pixels chacun, soit 25 % de la taille du parent.

Cette méthode vous permet de faire un centrage uniquement lorsque les dimensions vous permettent de faire des calculs. Et si vous avez un parent de 887 pixels de hauteur, vous ne pourrez rien écrire exactement, c'est déjà clair.

Insérer un élément dans une cellule du tableau. Encore une fois, si nous transformons élément parent dans une cellule du tableau, le bloc qui y est inséré sera automatiquement centré verticalement. Pour ce faire, le parent doit simplement définir vertical-align: middle.

Et si, en plus de cela, nous écrivons également margin: 0 auto, alors l'élément sera centré horizontalement !

Balises HTML définissant l'alignement du texte, l'indentation

Texte justifié utilisé en typographie

L'exemple ci-dessous montre comment aligner texte en largeur pages :

align="gauche"	align="right"
	Chaque jour, le nombre de travailleurs employés dans le secteur des services et la diffusion de l'information augmentent. Si les symboles des siècles passés étaient la ferme et l'usine, le symbole du XXIe siècle actuel est un bureau équipé d'ordinateurs qui ont accès au flux d'informations.
align="justifier"	align="center"
Chaque jour, le nombre de travailleurs employés dans le secteur des services et la diffusion de l'information augmentent. Si les symboles des siècles passés étaient la ferme et l'usine, le symbole du XXIe siècle actuel est un bureau équipé d'ordinateurs qui ont accès au flux d'informations.	Chaque jour, le nombre de travailleurs employés dans le secteur des services et la diffusion de l'information augmentent. Si les symboles des siècles passés étaient la ferme et l'usine, le symbole du XXIe siècle actuel est un bureau équipé d'ordinateurs qui ont accès au flux d'informations.

La valeur justifiée fournit des alignement du texte à droite et à gauche, C'est en largeur. Cette méthode est largement utilisée dans l'impression.

Alignement du texte en HTML pour centrer et justifier

Aligner le texte en HTML au centre, le texte à droite:

Résultat:

Attributs et valeurs

• align="left" - définit alignement du texte à gauche(défaut).
• align="center" - aligne le texte au centre.
• align="right" aligne le texte à droite.

Alignement | Retrait de texte HTML

Texte HTML et son retrait à gauche de la page

produisons retrait du texteà gauche de deux manières :

Résultat:

Afficher dans une nouvelle fenêtre.

L'alignement des éléments horizontalement et verticalement peut être fait différentes façons. Le choix de la méthode dépend du type d'élément (bloc ou inline), du type de son positionnement, de sa taille, etc.

1. Alignement horizontal au centre du bloc / page

1.1. Si le bloc a une largeur :

div ( width: 300px; margin: 0 auto; /*centrer l'élément horizontalement dans le bloc parent*/ )

Si vous souhaitez aligner un élément en ligne de cette façon, vous devez le définir pour afficher : block;

1.2. Si un bloc est imbriqué dans un autre bloc et qu'aucune largeur n'est définie pour lui :

.wrapper(text-align:center;)

1.3. Si le bloc a une largeur et doit être fixé au centre du bloc parent :

.wrapper (position : relative ; /* définit la boîte parente sur une position relative afin que nous puissions absolument positionner la boîte à l'intérieur plus tard*/) .box ( largeur : 400px ; position : absolue ; gauche : 50 % ; margin-left : 200px; / *décaler le bloc vers la gauche d'une distance égale à la moitié de sa largeur*/ )

1.4. Si aucune largeur n'est définie pour les blocs, vous pouvez centrer à l'aide du bloc wrapper parent :

.wrapper (text-align: center; /*center the content of the block*/) indent between blocks*/ )

2. Alignement vertical

2.1. Si le texte occupe une ligne, par exemple, pour les boutons et les éléments de menu :

.button (hauteur : 50 px ; hauteur de ligne : 50 px ; )

2.2. Pour aligner un bloc verticalement à l'intérieur du bloc parent :

.wrapper (position : relative ;) .box ( hauteur : 100 px ; position : absolue ; haut : 50 % ; marge : -50px 0 0 0; )

2.3. Alignement vertical par type de table :

.wrapper ( affichage : tableau ; largeur : 100 % ; )

2.4. Si la boîte a une largeur et une hauteur définies et doit être centrée sur la boîte parent :

.wrapper ( position : relative ; ) .box ( hauteur : 100 pixels ; largeur : 100 pixels ; position : absolue ; haut : 0 ; droite : 0 ; bas : 0 ; gauche : 0 ; marge : auto ; débordement : auto ; /*to le contenu ne s'est pas propagé */ )

2.5. Positionnement absolu au centre de la page/du bloc à l'aide de la transformation CSS3 :

si l'élément a des dimensions

div ( largeur : 300 px ; /*définir la largeur du bloc*/ hauteur : 100 px ; /*définir la hauteur du bloc*/ transformer : traduire (-50 %, -50 %) ); position : absolu ; haut : 50 % ; gauche : 50% ; )

si l'élément n'a pas de dimensions et n'est pas vide

h1 ( marge : 0 ; transformation : translation(-50 %, -50 %); position : absolue ; haut : 50 % ; gauche : 50 % ; )

2.5. Positionnement absolu du bloc

au centre de la page

div ( largeur : 500 pixels ; hauteur : 100 pixels ; /* si la hauteur n'est pas explicitement définie, elle sera de 100 % */ position : absolue ; haut : 0 ; bas : 0 ; gauche : 0 ; droite : 0 ; marge : auto ; )

au centre du bloc

.wrapper ( position : absolu ; ) .box ( largeur : 100 px ; hauteur : 100 px ; /* si la hauteur n'est pas explicitement définie, elle sera de 100 % */ position : absolu ; haut : 0 ; bas : 0 ; gauche : 0 ; droite : 0 ; marge : auto ; )

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 ;) Alignement CSS travaillé, .child devrait être sans "float: left;". [ 1 ] Aussi dans Netscape 6.01+, Mozilla 0.6+. [ 2 ] Aussi dans Netscape 6.01+, Mozilla 0.6+.