Description

Aligne un bloc de texte sur le bord.

Les styles doivent être utilisés à la place de cet attribut

Syntaxe

Valeurs

Valeur par défaut

Exemple. Alignement du texte

Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et justo odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.

Navigateurs : ordinateur de bureau mobile ?

✖

Navigateurs

Les notations suivantes sont utilisées dans la table du navigateur.

• - l'élément est entièrement pris en charge par le navigateur ;
• - l'élément n'est pas perçu par le navigateur et est ignoré ;
• - pendant le fonctionnement, diverses erreurs peuvent apparaître, ou l'élément est pris en charge avec des réserves.

Le numéro indique la version du navigateur à partir de laquelle l'élément est pris en charge.

Pour les images, les normes ne définissent pas d'alignement par défaut par rapport au texte et aux autres images sur la même ligne : il n'est pas toujours possible de prédire à quoi ressembleront ces composants.1 Dans les documents HTML, les images sont généralement positionnées « en ligne ». avec une seule ligne de texte. Comme il est d'usage dans les médias imprimés, le texte les « entoure », de sorte que plusieurs lignes peuvent être adjacentes à l'image, et non une seule.

Heureusement, les créateurs de documents ont un certain contrôle sur la façon dont les images s'alignent sur le texte environnant à l'aide de l'attribut align de la balise. . Les standards HTML et XHTML définissent cinq valeurs pour l'attribut align : left, right, top, middle, bottom. Les valeurs gauche et droite entraînent l'enroulement du texte autour de l'image, décalé vers le bord approprié. Les trois autres alignent l’image verticalement par rapport au texte environnant.

Tous les navigateurs populaires, notamment Opera, Firefox, Netscape et Internet Explorer, conviennent que l'attribut align=bottom est l'alignement vertical par défaut et placent uniformément les images au-dessus du caractère le plus haut d'une ligne de texte, voir Figure 1. 15.11.

Dans le même temps, les navigateurs ne sont pas d’accord sur la manière de positionner les images avec l’attribut align=middle par rapport au texte. En figue. La figure 5.11 montre que Netscape et Opera placent l'image en fonction de la ligne centrale du texte. Concernant les navigateurs Internet Explorer

Riz. 5.11. Alignement standard des images intégrées

Riz. 5.12. Internet Explorer et Firefox alignent la ligne centrale de l'image avec la ligne centrale de l'élément le plus haut, plutôt qu'avec la ligne centrale du texte.

et Firefox, ils positionnent l'image le long de la ligne centrale de l'élément le plus haut, qui n'est pas nécessairement du texte (Figure 5.12).

De plus, les navigateurs, à un degré ou à un autre, prennent en charge cinq fonctionnalités supplémentaires d'alignement vertical des images : texttop, center, absmiddle, baseline et absbottom (ceux qui n'ont pas deviné leur signification, levez la main) :

L'expression align=texttop indique au navigateur d'aligner le bord supérieur de l'image avec le bord supérieur de l'élément de texte le plus haut de la ligne actuelle. Sinon, top est la valeur qui aligne le bord supérieur de l'image avec le bord supérieur de l'élément, du composant de texte ou de l'image le plus haut de la ligne actuelle. Si la ligne ne contient pas d'autres images dépassant du texte, texttop et top ont le même effet. Opera ne prend pas en charge Texttop, mais d'autres navigateurs populaires l'interprètent strictement selon cette description.

Introduit pour la première fois dans Internet Explorer et Netscape, le centre de valeur est interprété de la même manière que le milieu dans Internet Explorer, Netscape et Firefox. N’oublions pas que chacun d’eux comprend le sens du milieu à sa manière. Opera ignore l'expression align=center.

Si vous définissez l'attribut d'alignement de la balise absmiddle, le navigateur définira le milieu absolu de l'image par rapport au milieu absolu de la ligne actuelle. Ce n'est pas le cas des valeurs du milieu et du centre, qui alignent le milieu de l'image avec la ligne de base de la ligne de texte actuelle. Alors que Netscape et Opera ne font pas de différence entre absmiddle et middle, Firefox et Internet Explorer utilisent ces valeurs pour aligner sélectivement les images le long des lignes médianes. En d’autres termes, Firefox et Internet Explorer traitent le milieu de la même manière que Netscape traite le milieu.

Riz. 5.13. Lors de l'alignement des images avec l'attribut alingn=absbottom, les navigateurs prennent en compte les légendes

bas et ligne de base (par défaut)

Les valeurs inférieures et de base ont le même effet que si vous n'aviez pas du tout inclus l'attribut d'alignement. Le navigateur aligne le bord inférieur de l'image avec la ligne de base du texte. Cela ne doit pas être confondu avec l'effet de la valeur absbottom, qui prend également en compte les parties des lettres qui descendent en dessous de la ligne de base.1 (Si vous avez toujours la main levée, vous pouvez la baisser.)

L'expression align=absbottom indique au navigateur d'aligner le bord inférieur de l'image avec le véritable bord inférieur du texte sur la ligne actuelle. Le vrai bas est le point le plus bas du texte, y compris les éventuels descendants (comme le bas d'un "y"), même s'il n'y en a pas sur la ligne. La ligne de base s'étend le long du bord inférieur du « v » dans le symbole « y ». Opera, le porte-drapeau, ignore la valeur absbottom, et d'autres navigateurs populaires la traitent comme décrit (Figure 5.13).

Utilisez le haut et le milieu pour combiner des icônes, des puces de liste et d'autres images spéciales avec du texte adjacent. Dans d'autres cas, align=bottom (sélectionné par défaut) permet d'obtenir une meilleure apparence. Lorsque vous alignez une ou plusieurs images sur une ligne, choisissez la valeur d'attribut qui vous donnera la meilleure apparence pour votre document.

Jusqu'à présent, nous avions aligné les éléments uniquement à gauche. Plus précisément, vous et moi n'avons pas fait cela du tout, et le navigateur lui-même aligne les éléments vers la gauche par défaut. Bien sûr, ce serait trop ennuyeux de tout aligner à gauche. Par conséquent, il existe différentes manières de centrer et d’aligner à droite.

L'alignement des éléments est quelque chose que vous devez simplement savoir lors de cette opération. La première chose que vous devez faire est de taper une page simple.

Il était une fois un tag

Je ne vous conseille pas de l'utiliser maintenant, en raison de la disponibilité de méthodes plus modernes, mais je ne peux m'empêcher de le mentionner. C'est très, très simple à utiliser. Tout ce dont vous avez besoin pour être centré, vous le placez à l’intérieur de cette balise. Par exemple, ici nous alignons le cap du 1er niveau au centre.

Vous pouvez ajouter une image, également alignée au centre, passons également à la ligne suivante en utilisant la balise
:

Titre de 1er niveau, aligné au centre

C'était une étiquette

, qui est déjà obsolète, en plus, contrairement à vos attentes en matière de tags Et n'existe tout simplement pas. Disons aligné à gauche par défaut, aligné au centre à l'aide de la balise , mais qu'en est-il du bon ?

Pour résoudre ce problème, les développeurs ont mis au point un moyen universel d'aligner les éléments HTML. La méthode consiste à utiliser ce qu'on appelle des conteneurs, qui sont créés à l'aide de la balise

. Autrement dit, tout ce qui doit être placé dans un conteneur spécifique est placé à l'intérieur de la balise.

. Et cette balise a déjà l'attribut " aligner", dont la valeur détermine la position de ce conteneur. Il existe trois valeurs : " gauche", "centre", "droite". Par défaut, c'est " gauche« Cependant, je pense que cela ne vous surprend pas.

Écrivons le même maintenant Code HTML, mais en utilisant des conteneurs, en plus, alignons-nous non pas au centre, mais à droite.

Comme vous pouvez le constater, tout fonctionne. Je vous conseille de modifier également les valeurs de l'attribut " aligner" pour examiner d'autres types d'alignement du contenu des conteneurs.

Une autre façon d'aligner les éléments HTML- ce sont des tableaux, mais ce sujet mérite une discussion à part, nous en parlerons donc dans l'un des articles suivants.

Pour l'instant, votre page devrait ressembler à ceci :

Titre de 1er niveau, aligné au centre

Titre de 1er niveau, aligné à droite

Cordialement, Mikhaïl Rusakov.

P.S. Si vous voulez en savoir plus sur HTML, alors jetez un œil à mon cours gratuit avec un exemple de création de site Web sur HTML:

Pour les images, vous pouvez spécifier leur position par rapport au texte ou à d'autres images sur la page Web. La façon dont les images sont alignées est spécifiée par l'attribut align.

Cet attribut est obsolète, utilisez plutôt des styles.

Syntaxe

Valeurs

Dans le tableau 1 répertorie les valeurs possibles de l'attribut align et le résultat de son utilisation.

Tableau 1. Utilisation des valeurs d'attribut d'alignement

Signification	Description	Exemple
bas	Aligne la bordure inférieure de l'image avec le texte environnant.
gauche	Aligne l'image sur le bord gauche de la fenêtre.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
milieu	Aligne le milieu de l'image sur la ligne de base de la ligne actuelle.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
droite	Aligne l'image sur le bord droit de la fenêtre.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
haut	La bordure supérieure de l'image est alignée sur l'élément le plus haut de la ligne actuelle.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Valeur par défaut

Exemple

Ce texte s'enroule autour du bord gauche de l'image.

Navigateurs

Les notations suivantes sont utilisées dans la table du navigateur.

• - l'élément est entièrement pris en charge par le navigateur ;
• - l'élément n'est pas perçu par le navigateur et est ignoré ;
• - pendant le fonctionnement, diverses erreurs peuvent apparaître, ou l'élément est pris en charge avec des réserves.

Le numéro indique la version du navigateur à partir de laquelle l'élément est pris en charge.

Balises HTML qui déterminent l'alignement et l'indentation du texte

Texte justifié utilisé en typographie

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

aligner="gauche"	aligner="droite"
	Le nombre de travailleurs employés dans le secteur des services et dans la diffusion de l'information augmente chaque jour. Si les symboles des siècles passés étaient la ferme et l’usine, alors le symbole du XXIe siècle actuel est un bureau équipé d’ordinateurs ayant accès au flux d’informations.
aligner="justifier"	aligner="centre"
Le nombre de travailleurs employés dans le secteur des services et dans la diffusion de l'information augmente chaque jour. Si les symboles des siècles passés étaient la ferme et l’usine, alors le symbole du XXIe siècle actuel est un bureau équipé d’ordinateurs ayant accès au flux d’informations.	Le nombre de travailleurs employés dans le secteur des services et dans la diffusion de l'information augmente chaque jour. Si les symboles des siècles passés étaient la ferme et l’usine, alors le symbole du XXIe siècle actuel est un bureau équipé d’ordinateurs ayant accès au flux d’informations.

La valeur de justification garantit l'uniformité aligner le texte à droite et à gauche, c'est en largeur. Cette méthode est largement utilisée en imprimerie.

Aligner le texte en HTML au centre et à la largeur

Aligner le texte en HTML centré, texte à droite:

Résultat:

Attributs et valeurs

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

Aligner | Indentation du texte HTML

Texte HTML et son indentation sur le côté gauche de la page

Nous produirons indentation du texteà gauche de deux manières :

Résultat:

Afficher dans une nouvelle fenêtre.