.

L'attribut align est assez universel et peut être appliqué non seulement au texte principal, mais également à des titres comme

. L'exemple 1 montre comment définir l'alignement dans un tel cas.

Exemple 1 : alignement du texte

Comment attraper un lion ?

Méthode de force brute

Nous divisons le désert en un certain nombre de zones élémentaires dont la taille coïncide avec les dimensions hors tout du lion, mais est plus petite que la taille de la cage. Ensuite, par simple recherche, nous déterminons la zone dans laquelle se trouve le lion, ce qui entraîne automatiquement sa capture.

Méthode de dichotomie

Nous divisons le désert en deux moitiés. Dans une partie il y a un lion, dans l’autre il n’y en a pas. Nous prenons la moitié dans laquelle se trouve le lion et la divisons à nouveau en deux. Nous répétons cela jusqu'à ce que le lion soit attrapé.

Le résultat de l'exemple est présenté sur la Fig. 1.

Riz. 1. Alignez le texte à droite et à gauche

Dans cet exemple, le titre est aligné au centre de la fenêtre du navigateur, le paragraphe en surbrillance est aligné à droite et le corps du texte est aligné à gauche.

Jusqu'à un certain temps, comme beaucoup d'entre vous, j'utilisais deux méthodes :

1. La première méthode est basée sur la propriété float. Le bloc de gauche reçoit float: left, le bloc de droite float: right
2. La deuxième méthode consiste à positionner le bloc de droite de manière absolue, avec les paramètres right : 0 ou left : 100%, margin-left : -(block width)

Le principal inconvénient des deux méthodes est que si les blocs doivent être alignés le long de la bordure inférieure ou le long de la ligne centrale les uns par rapport aux autres, vous devez alors utiliser la méthode de sélection pour décaler les blocs verticalement, en leur donnant soit top : anyValue, soit marge supérieure : anyValue. Et la première méthode, en plus de tout, a un autre, pas tellement un inconvénient, mais une petite chose désagréable. Il s'agit de la nécessité d'effacer le flux en utilisant clearFix"a, overflow ou un div supplémentaire.
Donc méthode numéro 3. Tout d'abord, le code :

HTML lui-même

Copier la source | Copier le HTML

1. < div class ="wrap">
2. < div class ="left">< a href ="#">Bloc gauche< div class ="right">< a href ="#">Bloc droit

En fait CSS

Copier la source | Copier le HTML

1. .envelopper(
2. largeur : 500 px ;
3. fond : #555 ;
4. hauteur : 500 px ;
5. .gauche droite (
6. affichage : bloc en ligne ;
7. //affichage : en ligne ;
8. //zoom : 1 ;
9. largeur : 100 % ;
10. marge droite : -100% ;
11. alignement vertical : bas ;
12. .droite (
13. aligner le texte : à droite ;
14. .left a , .right a ( display : inline -block ; position : relative ; )
15. .left a (largeur : 200px ; hauteur : 100px ; arrière-plan : vert ;)
16. .right a (largeur : 100px ; hauteur : 200px ; fond : rose ;)

Explications

L'essence de la méthode est de superposer les blocs les uns sur les autres en utilisant margin-right : -100% et d'aligner le contenu du bloc de droite vers la droite en utilisant text-align : right.
Il est conseillé d'écrire les deux blocs (droite et gauche) sur une seule ligne, sinon, en raison du caractère de saut de ligne, le bloc de droite s'étendra légèrement au-delà des limites du bloc parent.
Les liens doivent être mis en position : relative, sinon, en raison de la superposition des blocs, certains risquent de ne pas être cliquables.

Avantages de la méthode

Le principal avantage est que l’alignement vertical commence désormais à fonctionner pour nos blocs. Et nous pouvons facilement les aligner le long de la bordure supérieure ainsi qu’en bas et au centre.

Inconvénients de la méthode

Et le principal inconvénient est que lors de l'utilisation de cette méthode, nous devons être fermement sûrs que le contenu des blocs n'augmentera pas au point qu'ils commencent à se chevaucher (d'ailleurs, la méthode avec des flotteurs est exempte de cet inconvénient , car avec l'augmentation du contenu des blocs, ils s'emboîteront les uns sous les autres).

P.S.

Je n'ai pas vu une telle méthode sur Internet, je demande donc : si quelqu'un trouve un article similaire publié plus tôt, faites-le-moi savoir.

Mise à jour.

Dans les commentaires, mon attention a été attirée sur une méthode utilisant text-align : justifier. Cette méthode est également bonne, mais elle présente deux inconvénients. Premièrement, cela nécessite l'introduction d'un élément supplémentaire qui émule la dernière ligne du bloc de texte, et deuxièmement, cela ne fonctionnera pas dans IE6-IE7 pour les éléments de bloc.

Dans des programmes tels que Microsoft Word, par exemple, vous avez probablement rencontré des outils d'alignement horizontal du texte. Vous pouvez aligner le texte à gauche ou à droite, centré ou justifié. La même chose est vraie en CSS - l'alignement du texte est effectué à l'aide de la propriété text-align et des valeurs correspondantes, qui sont indiquées dans le tableau :

Exemple d'entrée de style :

P ( alignement du texte : gauche ; )

Valeurs à gauche, à droite et au centre Le texte aligné à gauche apparaît presque toujours bien sur les pages Web et est facile à lire. En règle générale, l'alignement à droite dans les langues européennes est rarement utilisé, mais il ne peut pas être qualifié de complètement inutile : ce style est utile pour concevoir magnifiquement des légendes de photos ou de citations, en alignant le contenu des cellules d'un tableau ou de petits fragments de texte. La valeur centrale est souvent utilisée aux mêmes fins. La valeur de justification Justify text en CSS peut être utilisée pour les versions imprimées des pages, mais il n'est pas recommandé de se laisser emporter par ce style sur les pages Web conçues pour l'affichage. Pourquoi? À première vue, le texte justifié semble joli et uniforme, comme une chronique dans un journal. Mais pour étirer le texte de cette façon, le navigateur doit ajouter un espace supplémentaire entre les mots, ce qui peut créer des espaces disgracieux dans le texte et le rendre difficile à lire. Dans les programmes conçus pour préparer les données à l'impression, il existe un ajustement beaucoup plus fin de l'espacement dans le texte et utilise également souvent le retour à la ligne, ce qui n'est pas disponible dans de nombreux navigateurs. Il est donc nécessaire de vérifier à quel point le texte est justifié sur les pages Web, et la première question à se poser est : est-il facile à lire ? Cela est particulièrement vrai pour les blocs de texte étroits (y compris les versions mobiles des pages). Valeurs de début et de fin Les valeurs de début et de fin de la propriété text-align sont implémentées dans CSS3 et fonctionnent à peu près de la même manière que left et right , mais il y a une différence. En appliquant la valeur de départ au texte qui s'étend de gauche à droite (LTR), l'alignement sera à gauche (de manière correspondante, pour le texte qui s'étend de droite à gauche (RTL), l'alignement sera à droite). Il est logique que la valeur finale fonctionne de la manière opposée (c'est-à-dire qu'elle aligne le texte LTR à droite et le texte RTL à gauche). Ces deux valeurs ne sont pas prises en charge par certains navigateurs, notamment Internet Explorer, donc à moins que vous n'ayez absolument besoin de les utiliser, nous vous recommandons d'utiliser les valeurs gauche et droite.

Les captures d'écran montrent des exemples d'utilisation de différentes valeurs pour la propriété CSS text-align :

Capture d'écran 1 : Alignement du texte LTR vers la gauche à l'aide de la valeur de départ. Un aspect similaire peut être obtenu en utilisant la valeur de gauche.
Capture d'écran 2 : Alignement du texte LTR vers la droite en utilisant la valeur de fin. Un aspect similaire peut être obtenu en utilisant la bonne valeur.
Capture d'écran 3 : Alignement du texte sur la largeur. Avec une petite police et une grande largeur de page/bloc, cette option pour aligner le texte sur une page Web semble acceptable.
Capture d'écran 4 : la taille de la police a été augmentée et la largeur du bloc a été réduite par rapport à l'exemple précédent. Comme vous pouvez le constater, de vilaines lacunes sont apparues dans le texte (soulignées d'un trait rouge).
Capture d'écran 5 : deux manières d'aligner du texte en utilisant l'exemple de la version mobile de notre tutoriel (à gauche - text-align : gauche, à droite - text-align : justifier). Essayez de lire le texte dans les deux colonnes et déterminez quelle option est la plus confortable à lire.

Article 6. Alignement du texte dans une page HTML (gauche, centre, droite et justifié)

Date de création : 2009-11-29

1.

Donc, en utilisant correctement "tag-paragraphe" -, nous pouvons poster du texte À gauche bord, dans le centre, de droit bord et en largeur pages. Pour ce faire, l'attribut est inséré à l'intérieur de la balise d'ouverture align="left", align="center", align="right" ou align="justify" respectivement.

En réalité, cela ressemble à ceci :

Le texte sera centré

Le texte sera aligné à droite

Appliquons maintenant l'alignement à notre exemple. Je vais centrer le mot "Bonjour !" Pour cela nous choisirons .

(N'oubliez pas que le texte situé à l'intérieur de la balise sera séparé par un paragraphe en dessous et au-dessus du reste du texte. Et pourtant, pour devenir un bon concepteur de sites Web, il faut apprendre non seulement le HTML, mais aussi le CSS (styles), et bien d'autres programmes)

Enregistrez maintenant le document, actualisez-le dans le navigateur et voyez ce qui se passe :

Résultat: Le mot « Bonjour ! » est situé dans un nouveau paragraphe au centre de la page HTML.

(si nous supprimons le paramètre align="..." du paragraphe, alors le texte sera par défaut sur le bord gauche)

2. ...

De la deuxième manière, vous pouvez placer du texte seulement au centre. Mais il y a ici aussi un avantage. Cela consiste dans le fait que le texte ne sera pas placé dans le paragraphe. Pour ce faire, vous devez le mettre dans un tag

... .

C'est très simple. Revoyez les changements dans notre exemple et vous comprendrez tout (pour plus de clarté, j'ai supprimé la balise
après la balise de fermeture):

Enregistrez maintenant le fichier texte, actualisez le navigateur et voyez le résultat :

Résultat: Le texte est centré sans retrait en bas ni en haut.

3. Alignement

...

La troisième option que vous pouvez utiliser pour aligner le texte est celle des balises.

.

Il s'écrit exactement de la même manière que les balises :

- le texte sera centré

- le texte sera positionné à gauche

- le texte sera situé sur le bord droit

- le texte sera situé sur toute la largeur de la page

Pour plus de clarté, j'insérerai du texte arbitraire dans l'exemple et lui appliquerai un alignement en largeur, c'est-à-dire d'un bord à l'autre de la page :

Maintenant, comme d'habitude, enregistrez le fichier texte, actualisez le navigateur et regardez le résultat :

Résultat: On voit que, contrairement au tag

Étiqueter