Deuxième étape
Dans la deuxième étape, l'algorithme calcule les largeurs de toutes nos « briques » dans la ligne, les additionne et soustrait le résultat obtenu de la largeur totale de la ligne elle-même.

De là, nous pouvons conclure que nous avons maintenant la somme totale de tous les espaces blancs de la ligne, qui est égale à 116px.

Troisième étape - finale
La troisième et dernière étape de l'algorithme consistera à diviser le chiffre obtenu (en dans ce cas 116) par le nombre d'espaces dans la ligne (il y en a 7 dans notre ligne). La largeur d'un espace est soustraite du résultat (16,571) et cette valeur est ajoutée à chacun d'eux. Qu'est-ce que ça donne au final ? répartition uniforme indentation sur toute la ligne.

Conclusion
Comme on peut le voir, l’algorithme text-align: Justify n’est pas si compliqué en réalité, tout semble clair et logique. Je suis sûr que chacun de nous, résolvant un problème similaire, calculerait le résultat exactement selon le même scénario. La seule difficulté est d'écrire une solution bonne, belle et surtout de haute qualité, tout en dépensant un minimum de matériel. Après tout, il existe de nombreux pièges, sous la forme de la dernière ligne (ne relevant pas de l'algorithme) qui doit être masquée ou alignée d'une manière ou d'une autre de la même manière que toutes les autres. Eh bien, bien sûr, il ne faut pas oublier l'interprétation du code, les navigateurs comme Opera, IE6-7, qui aiment présenter des surprises inattendues.

Notre tâche

Notre tâche est de construire une solution basée sur cet algorithme. Appliquez, simulez, remplacez, faites ce que vous voulez, l'essentiel est d'obtenir ce que l'on veut au final. À savoir, des éléments alignés uniformément dans une rangée, dont les côtés sont pressés contre leurs bordures. Et bien sûr, les distances (espaces) entre les éléments doivent être absolument les mêmes pour n'importe quelle largeur de conteneur.

Option 1

La toute première chose qui m'est venue à l'esprit a été de prendre une liste de cinq éléments, d'en rationaliser 4, de décharger le dernier et de l'étirer sur toute la largeur restante. Pour que ce dont nous parlons soit plus clair, je fournis le code.
La structure sera comme ça

Et CSS est comme ça

Ul ( police : 14px Verdana, Genève, sans-serif ; débordement : caché ; ) ul li ( ) ul li.left ( largeur : 20 % ; float : gauche ; ) ul li.right ( largeur : 20 % ; float : droite ; text-align: right; ) ul li.center ( text-align: center; ) ul li .content ( arrière-plan : #E76D13 ; largeur : 98px ; hauteur : 98px ; affichage : bloc en ligne ; text-align : left ; border: 1px solid #000; /* émulation de bloc en ligne pour IE6-7*/ //display: inline //zoom: 1);

Qu’avons-nous fait concrètement ? Et nous avons fait ce qui suit. Nous avons dispersé deux points à gauche et deux à droite autour à différentes parties en utilisant respectivement float: left et float: right, tout en leur attribuant 20% de la largeur à chacun, ce qui donnait au total 80% de la largeur totale du conteneur. J'ai décidé de ne pas rationaliser le dernier point, car son contenu lui-même occupe tout l'espace restant après les blocs flottants.
En conséquence, pour une telle solution, nous avons dû sacrifier le balisage, ou plutôt des classes supplémentaires + des conteneurs internes pour le contenu. Comme vous l'avez peut-être remarqué, j'ai créé chacun de ces conteneurs inline-block en leur attribuant display: inline-block, grâce auquel mon contenu pouvait être aligné dans n'importe quelle direction en utilisant text-align sur le parent. Ces « victimes », dans une large mesure, pourraient être attribuées à bonne décision, si ce n’est pour quelques « mais » significatifs.
Premièrement, comme le montrent les captures d'écran, seuls les éléments latéraux ont des retraits uniformes et il y a une nette différence entre le milieu et le reste. Et plus le conteneur est large, plus cela devient visible.
Deuxièmement, par souci d'expérimentation, j'ai attribué une largeur de 200 px au deuxième élément.

Et le deuxième élément est immédiatement apparu sous le troisième. Bien sûr, il serait possible de fixer une largeur minimale pour le conteneur et cela ne se produirait pas, mais cette action peut-elle être considérée comme une excuse ou une solution ? Bien sûr que non! Je veux que nos points puissent avoir n'importe quelle largeur et en même temps que notre algorithme fonctionne parfaitement.
Et troisièmement, tous ces wrappers supplémentaires, classes, calcul du nombre d'éléments, de leur largeur, ainsi que de la largeur du conteneur mettent un terme absolu à cette option, nous obligeant à aller plus loin, à la recherche d'une vraie solution.
Je publie cette option pour que chacun puisse juger et passer à la méthode suivante.

Option 2

La deuxième option ressemble à la première, mais seulement partiellement. Le fait est que nous n'en alignons qu'un à gauche, le bloc de gauche, et les autres sont déjà dans leur propre conteneur. Mais passons des paroles aux actes.

• 1
• • 2
  • 3
  • 4
  • 5

Si vous dites que dans cette situation nous avons essentiellement deux différentes colonnes, alors vous aurez tout à fait raison. Après tout, notre structure est divisée en deux parties, dont la gauche est un conteneur avec un bloc et la droite contient donc tout le reste. Cela ressemble à ceci :

La colonne de gauche est appuyée contre le bord gauche et contient le tout premier bloc unique. Ceci est nécessaire pour côté droit pressé fermement sur le côté droit et étiré sur tout l'espace restant. L'étirement de la partie droite se produit grâce à overflow: Hidden , qui crée son propre contexte de formatage, c'est-à-dire essentiellement son propre conteneur indépendant. Pour tout le monde éléments enfants de ce conteneur, sa largeur est de 100% et donc on étire les blocs à l'intérieur conformément à cette règle. Quatre blocs ont une largeur de 25 %, ce qui fait 100. Dans l'image, vous pouvez voir comment ces blocs sont disposés. Il est clair que éléments de bloc en ligne avec le contenu à l'intérieur aligné vers la droite en utilisant text-align: right , ce qui fait que le bloc le plus à droite affleure son côté, tout comme celui de gauche.

Grâce à de tels « sacrifices » à deux colonnes, nous avons obtenu un excellent résultat, et comme le montrent les premières figures, avec différentes résolutions, la distance des retraits entre les blocs reste absolument la même. Cela se produit en raison de blocs équivalents sur le côté droit. La largeur de chacun d'eux est de 25 % et l'élément à l'intérieur est de 100 px. Ce qui donne un espace égal à gauche de chaque « brique » individuellement.
Sur à l'heure actuelle Nous pouvons affirmer avec certitude qu'avec une largeur de bloc fixe, nous avons obtenu exactement ce que nous voulions.

Mais il est quand même intéressant de savoir ce qui se passera si l’on change la largeur d’abord du premier, puis de n’importe quel bloc du côté droit. Commençons par définir celui de gauche... eh bien, disons 150 px.

Ul li.one .content (largeur : 150 px ;)

Tout est super ! Jusqu’à présent, la même idée fonctionne avec le bon conteneur indépendant. Déplaçons maintenant notre largeur vers le premier bloc du côté droit.

Eh, mais cette expérience a échoué. La marge droite du bloc le plus à gauche s’est avérée plus petite que toutes les autres. Tout s'explique facilement par le fait que le contenu du premier élément à droite est devenu plus grand de 50px, et comme il est aligné sur côté droit, puis la largeur a été ajoutée visuellement à son côté gauche et, par conséquent, a commencé à différer de la largeur des blocs voisins. Eh bien, naturellement, l'indentation a changé, qui est devenue exactement 50 pixels plus petite.

De tout cela nous pouvons conclure que cette méthode nettement meilleur que son prédécesseur et qu'il a droit à la vie. Son seul inconvénient est que nous ne pouvons pas définir des largeurs différentes pour les blocs et doivent rester les mêmes. Ainsi, si vous avez une liste dans laquelle tous les éléments ont la même largeur, vous pouvez utiliser cette approche. Bien sûr, vous devez comprendre que vous ne pouvez pas vous passer d'une structure à deux colonnes + vous avez besoin d'un obligatoire largeur minimale au niveau du conteneur (largeur minimale), sinon, avec une petite largeur d'écran, les blocs se chevaucheront.
* D'ailleurs, dans mon exemple, dans le conteneur de droite, j'ai utilisé quatre blocs de 25 % chacun, et leur montant total était de 100 %. Par conséquent, vous devez vous rappeler que s'il y a, disons, 6 blocs, la largeur de chacun d'eux sera égale à 16,666, ce qui indique des pourcentages fractionnaires qui, par exemple, ne sont pas pris en charge dans le navigateur Opera.
En conséquence, le résultat dans ce cas sera légèrement différent de celui souhaité.

Option 3 - alignement du texte : justifier

Il convient de noter que jusqu'à présent, dans aucun exemple, nous n'avons jamais utilisé text-align: justifier , même si toutes nos solutions sont basées sur son algorithme. Je propose de briser cette tradition et de mettre enfin cette bête en action.

Dans la première partie de l'article, nous avons découvert que text-align: justifier affecte toutes les lignes sauf la dernière, ce qui signifie que nous devons construire notre liste en tenant compte de ce comportement en ajoutant un élément auxiliaire supplémentaire à la fin de la ligne. menu.

Ul ( police : 14px Verdana, Genève, sans-serif ; alignement du texte : justifier ; ) ul li ( arrière-plan : #E76D13 ; largeur : 98 px ; hauteur : 98 px ; affichage : bloc en ligne ; alignement du texte : gauche ; bordure : 1px solid #000; /* émulation de bloc en ligne pour IE6-7*/ //affichage : en ligne ; //zoom : 1 ; ul li.helper (largeur : 100 % ; hauteur : 0 ; visibilité : caché ; )

Il ressort clairement du code que nous avons créé une liste avec cinq éléments principaux et un élément auxiliaire. text-align : justifier sur l'élément parent principal ( ul), oblige ses descendants à obéir à son algorithme. Après tout, comme vous le savez, cette propriété fonctionne avec du texte, et comme nos éléments de bloc en ligne (affichage : bloc en ligne) sont essentiellement des mots continus dans une ligne, ce comportement est tout à fait naturel. Soit dit en passant, il convient de considérer que text-align: justifier est une propriété héritée, donc text-align: left sur ses descendants immédiats est mesure nécessaire. En faisant cela, nous semblons ramener l'alignement du contenu de nos blocs à état précédent.
Dans la première partie de l'article, j'ai mentionné que notre algorithme ne s'applique pas à la dernière ligne, mais fonctionne avec toutes les lignes sauf elle. J'ai donc ajouté un autre élément à la fin, un élément factice, et je l'ai étiré à 100 % de sa largeur, le forçant ainsi à s'étirer jusqu'à la toute dernière ligne de la liste. A l'aide de techniques simples (hauteur : 0, visibilité : cachée), je peux presque dire que je l'ai caché. Pourquoi ai-je dit « Presque » ? Nous y reviendrons un peu plus tard, jetons d'abord un coup d'œil à ce que nous avons proposé.

La première chose qui attire votre attention est que pour différentes largeurs, notre algorithme fonctionne comme il se doit. Avec des points de même largeur, la distance entre eux reste la même, ce qui est une bonne nouvelle. Mais il reste intéressant de savoir si tout sera aussi bien avec différentes largeurs de blocs. Attribuons des classes à quelques éléments et vérifions-les.

Ajoutons nos propres règles pour eux.

Premier (largeur : 150 px ;).troisième (largeur : 200 px ;)

Vérifions.

J'ai spécifiquement augmenté la largeur de l'écran pour que lorsque la largeur est petite, les blocs ne sautent pas sur une autre ligne, comme mots ordinaires dans le texte. Mais si vous regardez les résultats de l’algorithme, ça marche ! Les espaces entre les éléments restent égaux, même si nous avons augmenté la largeur de deux d'entre eux.
Ceux. on peut facilement dire que cette méthode, avec un élément supplémentaire à la fin, donne un excellent résultat et, si l'on limite la largeur de l'écran, alors son application dans la pratique ne nous décevra pas.
Alors, eh bien, maintenant, il est peut-être temps d’ajouter une touche à la pommade.
Tout d’abord, comme vous l’avez peut-être remarqué, dans tous les exemples, j’ai répertorié tous les navigateurs à l’exception d’IE6-7.
Deuxièmement, encore une fois, comme vous pouvez probablement le voir sur les images, au bas de notre ligne, là où se trouve l'élément supplémentaire, il y a de grands retraits incompréhensibles.
Trions cela dans l'ordre.

Premier problème est un problème IE6-7. Sans fournir de captures d'écran, je dirai tout de suite que notre méthode ne fonctionne pas là-bas. Les éléments de ces navigateurs sont étroitement pressés les uns contre les autres et ne s'étirent pas en ligne. Le fait est que l'analyseur IE6-7 ignore complètement les balises fermantes sur les éléments

. Et il n'y a pas de balises, ce qui signifie qu'il n'y a pas d'espace entre elles, et donc l'alignement du texte : justifier saute notre ligne, qui consiste essentiellement en des mots « en bloc en ligne » pressés les uns contre les autres.

Pour résoudre ce problème, nous allons à la plus haute montagne... MSDN. Hmmm... trouver quoi que ce soit sur ce site est très difficile. Mais après avoir bidouillé pendant un moment, une solution a été trouvée ! text-justify : journal - propriété permettant d'augmenter ou de diminuer l'espacement entre les lettres et entre les mots. MSDN déclare que cette chose est « la forme d'alignement la plus sophistiquée pour alphabet latin", mais dans cet article il y a aussi un ajout selon lequel pour les textes arabes, cette propriété s'étend également aux lettres elles-mêmes.
Super, nous avons juste besoin de quelque chose comme ça. Vérifions leurs paroles dans la réalité.

Ul ( police : 14px Verdana, Genève, sans-serif ; text-align : justifier ; /* Medicine for IE6-7*/ text-justify : journal ; ) ul li ( arrière-plan : #E76D13 ; largeur : 98px ; hauteur : 98px ; display: inline-block; text-align: left; border: 1px solid #000; /* émulation de bloc en ligne pour IE6-7*/ //affichage : inline : 1; : caché; .first(largeur : 150px;).third(largeur : 200px;)

Et voici le résultat.

Victoire! IE6-7 ont été vaincus par leurs propres armes. Super. Désormais dans tous les navigateurs, à commencer par IE6, notre méthode fonctionne parfaitement. Il s'avère que MSDN n'a pas déçu et leurs propos ont été confirmés dans la pratique. Alors text-align: justifier nous a aidé, alors prenons-en note et passons à la résolution du deuxième problème.

Deuxième problème est associé à un retrait incompréhensible entre le bas de la liste et notre ligne d'éléments. Quel est le problème? Mais le fait est que tout est tout à fait naturel et que ces étranges empreintes ne sont autres que espacement des lignes (hauteur de ligne) et taille de la police(font-size), qui sont a priori présentes pour les lignes et les lettres du texte. Nos éléments sont bloqués uniquement à l'intérieur et en ligne à l'extérieur, ils relèvent donc de ces règles.
Que dois-je faire? C'est facile ! Nous pouvons définir ces styles à zéro sur le conteneur, puis les restaurer à leur état précédent pour les descendants. Essayons.

Ul ( police : 14px Verdana, Genève, sans-serif ; text-align : justifier ; /* Zéro pour le parent*/ hauteur de ligne : 0 ; taille de police : 1px ; /* 1px pour Opera */ /* Cure pour IE6 -7*/ text-justify : journal ; ) ul li ( arrière-plan : #E76D13 ; largeur : 98 px ; hauteur : 98 px ; affichage : bloc en ligne ; alignement du texte : gauche ; bordure : 1 px solide #000 ; /* Restaurer y descendants, sauf le dernier */ line-height: normal; font-size: 14px; /* Sans cela, Opera aura un retrait sous les éléments */ vertical-align: top /* émulation de bloc en ligne pour IE6- 7 */ // affichage : en ligne ; //zoom : 1 ; ) ul li.helper ( largeur : 100 % ; hauteur : 0px ; visibilité : caché ; débordement : caché ; ) .first ( largeur : 150px ;). largeur : 200px ;)

Résultat.

Avant la remise à zéro

Après avoir réinitialisé

Super! Tout s'est bien passé. La remise à zéro des styles du conteneur principal nous a aidés. La seule chose à retenir maintenant est qu'en raison de la remise à zéro de la taille de la police, nous ne pourrons pas définir nos éléments sur une police dans des unités de longueur telles que em, ainsi que % pour n'apportera pas le résultat souhaité. Mais en général, notre méthode fonctionne parfaitement, nous pouvons donc résumer les résultats et passer à autre chose, car une seule solution ne nous suffit pas, il nous faut plus et mieux, n'est-ce pas ?

En résumant les résultats intermédiaires, je dirai que cette approche jusqu'à présent le leader parmi les décisions présentes jusqu'à présent, et que, personnellement, je n'y vois cependant pas un seul défaut, sauf... Sauf élément supplémentaireà la fin de la ligne, plus, me semble-t-il, des problèmes non pertinents avec % et em. Mais ces inconvénients considérables ne peuvent en aucun cas constituer une raison pour rejeter l’option présentée. Alors regardons le résultat et passons à autre chose.

Option 4 - Se débarrasser de l'élément supplémentaire

Dans la version précédente, nous utilisions un élément supplémentaire pour notre objectif, en le plaçant à la fin de la liste. D'un côté, bien sûr, cette manœuvre a porté ses fruits, mais de l'autre... mais d'un autre côté, elle a créé quelques inconvénients. Par exemple, lors de l'ajout dynamique d'éléments, le bloc auxiliaire ne fera que gêner, puis cette « queue » gâchera notre structure, l'obstruant. Dans cette option, je suggère de s'en débarrasser sans gâcher la solution.
CSS2.1 propose depuis longtemps des éléments tels que des pseudo-éléments. Ce sont des entités abstraites qui peuvent être générées par un élément et insérées à son début ou à sa fin. Pourquoi ne pas remplacer notre bloc auxiliaire supplémentaire par un tel pseudo-élément ? Essayons...

Ul ( police : 14px Verdana, Genève, sans-serif ; text-align : justifier ; /* Zéro pour le parent*/ hauteur de ligne : 0 ; taille de police : 1px ; /* 1px pour Opera */ /* Cure pour IE6 -7*/ text-justify : journal ; zoom : 1 ; ) ul:after ( largeur : 100 % ; hauteur : 0 ; visibilité : caché ; débordement : caché ; contenu : " » ; affichage : bloc en ligne ; ) ul li ( arrière-plan : #E76D13 ; largeur : 98px ; hauteur : 98px ; affichage : bloc en ligne ; alignement du texte : gauche ; bordure : 1px solide #000 ; /* Restauration à partir des descendants, sauf le dernier */ hauteur de ligne : normal ; font -size: 14px; /* Sans cela, Opera aura un retrait sous les éléments */ vertical-align: top /* émulation de bloc en ligne pour IE6-7 */ //display: inline;

Dans cette situation, nous avons utilisé le pseudo-élément : nous avons ensuite généré à la fin de notre liste. En le réglant aux mêmes valeurs que l'ancien bloc auxiliaire, nous avons essentiellement fait la même chose, mais sans entrer dans le balisage. Ceux. créé le même, vide, mais élément utile. Et voici les résultats.

Super! L’astuce du pseudo-élément a fonctionné. Désormais, notre balisage est propre, soigné et sans « déchets » inutiles. Nous avons réussi à nous débarrasser de l'élément supplémentaire en le remplaçant complètement par celui généré.
Mais comme d'habitude, il y a eu quelques aventures dans IE6-7. Malheureusement, les navigateurs IE6-7 ne prennent pas en charge :after et:before . Et s'il n'y a pas de support, alors il n'y a pas de blocs auxiliaires, ce qui signifie qu'il n'y a tout simplement rien à étirer. Par conséquent, l’image dans ces navigateurs est la suivante.

Comme vous pouvez le voir sur la capture d'écran, IE6-7 ignore complètement les espaces entre les blocs, les rapprochant les uns des autres. Même si nous avons déjà utilisé artillerie lourde sous la forme texte-justifier : journal. Pourquoi cela se produit-il ? Découvrons-le.
Il s’avère que l’essentiel est que le texte justifie : le journal ne donne que opportunitéétirer nos lettres (inline-block), mais pas équipe. En termes simples, il indique à la chaîne comment elle souhaite qu'elle soit étirée, et aligner le texte : justifier est la force d'étirement. Ceux. text-align : justifier est responsable de l'étirement de la ligne, et text-justify : journal précise uniquement comment exactement cet étirement se produira.
Oui, mais alors la question se pose : « S’il existe à la fois l’opportunité et le pouvoir qui peuvent la réaliser, alors pourquoi rien ne se passe ? La réponse réside dans l’alignement du texte : justifier la propriété elle-même. Si vous vous en souvenez, lors de la discussion sur son algorithme, j'ai mentionné qu'il ne s'étend pas jusqu'à la dernière ligne du texte. Et puisque nous avons supprimé l'élément auxiliaire à la fin de la liste, notre ligne (même s'il n'y en a qu'une) avec des blocs est donc devenue la dernière, et donc l'algorithme a refusé de travailler avec lui.

Comment est-ce possible ? Y a-t-il un moyen de s'en sortir ?
Heureusement, le monde ne manque pas de personnes aimables, et l’une d’entre elles m’a orienté sur la bonne voie. Il s’avère que la solution était juste sous mon nez. text-align-last est une propriété qui active l'algorithme text-align: justifié sur la toute dernière ligne de texte si le même text-align: justifier lui est appliqué. En termes simples, lorsque nous appliquons l'habituel text-align: justifier au texte, puis, voyant cela, text-align-last indique au premier qu'il fait quelque chose de mal et qu'il devra désormais travailler également sur la dernière ligne.
Le plus intéressant est que cette propriété est considérée comme étant spécifiquement orientée vers Internet Explorer, c'est exactement ce dont nous avons besoin). En général, il est temps de se mettre au travail.

Ul ( police : 14px Verdana, Genève, sans-serif ; text-align : justifier ; /* Zéro pour le parent*/ hauteur de ligne : 0 ; taille de police : 1px ; /* 1px pour Opera */ /* Cure pour IE6 -7*/ text-justify : journal ; zoom : 1 ; /* Inclure la dernière ligne dans le travail */ text-align-last : justifier ; ; débordement : caché ; contenu : " ; affichage : bloc en ligne ; ul li (arrière-plan : #E76D13 ; largeur : 98 px ; hauteur : 98 px ; affichage : bloc en ligne ; alignement du texte : gauche ; bordure : 1 px solide #000 ; /* Restaurer les descendants, sauf le dernier */ line-height: normal; font-size: 14px /* Sans cela, Opera aura un retrait sous les éléments */ vertical-align: top /* inline; -émulation de bloc pour IE6-7 */ //display: inline; //zoom: 1);

Oui! Nous l'avons fait. text-align-last : justifier a fait ce qu'il était censé faire et l'a fait de 5 points. L'algorithme a commencé à fonctionner sur notre dernière et unique ligne. Célébrons donc la victoire et résumons les résultats de cette méthode.

Eh bien, je suis content. Je suis heureux que nous ayons réussi à trouver une solution vraiment valable. Et ce n'est pas facile à trouver, mais à tout comprendre et à l'amener à une compatibilité absolue entre navigateurs, en utilisant un minimum de code et sans encombrer le balisage. Il n’y a que des avantages, mais qu’en est-il des inconvénients ? Quant à moi, ils n’existent tout simplement pas. Par rapport à la version précédente, nous n’avons fait qu’améliorer les résultats dans celle-ci. Sauf si...

La seule chose à retenir maintenant est qu'en raison de la remise à zéro de la taille de la police, nous ne pourrons pas définir nos éléments sur une police en unités de longueur telles que em, ainsi que % pour n'apportera pas le résultat souhaité.

Mais, encore une fois, ces « inconvénients » peuvent difficilement être qualifiés de tels. Leur inutilité est de dire qu’on peut pratiquement les oublier si ce n’est pas important.
Dans l’ensemble, la solution est excellente, fiable et de très haute qualité.

CV

Dans cet article, nous avons examiné non seulement les méthodes qui peuvent nous aider à aligner uniformément les blocs en largeur, mais nous avons également examiné en détail les mécanismes de fonctionnement de toutes les propriétés et pièces impliquées dans le processus. Tout cela est important pour comprendre les choses auxquelles nous sommes confrontés. Par conséquent, je recommande fortement de relire l'article, et plus d'une fois.
Je suis incroyablement heureux que nous ayons réussi à atteindre notre objectif et à trouver une solution valable et de haute qualité.

Bonne journée à tous. Alexey Gulynin est en contact. Dans le dernier article, nous avons discuté Balises HTML pour travailler avec du texte. Il est temps de s'en occuper comment aligner le texte sur Page HTML . Si vous avez remarqué, tout ce que vous avez tapé auparavant est aligné sur le bord gauche du navigateur, et nous ne faisons rien, voici comment cela fonctionne par défaut. Que devons-nous faire pour aligner le contenu, disons, dans le. centre? Une balise obsolète me vient à l'esprit

. Pour le moment, je ne l’utilise nulle part, mais je pense qu’il vous sera utile de le savoir. Écrivons le code de notre page et positionnons le texte au centre. Pour ce faire, vous devez placer du texte ou tout autre élément (par exemple une image) entre les balises :

Texte du côté gauche

Texte central

Après avoir ouvert la page dans le navigateur, nous verrons que le texte est bien situé au centre de la page.
Je voudrais attirer votre attention sur ce point : vous pouvez décider que s'il y a un tag

- ça veut dire qu'il doit y avoir des balises , Et . Envelopper le contenu dans des balises vous verrez que le texte est effectivement situé à gauche. Mais ce ne sera pas parce que tu as mis le tag , mais parce que le navigateur organise par défaut tous les éléments de gauche à droite, de haut en bas. Puisque le navigateur ne connaît pas la balise il l'a raté de peu. Balises Et n'existe pas.

Que faire si l'on veut placer des éléments à droite ? Regardons le concept de conteneur

, dont la connaissance est indispensable lorsque disposition des blocs site. Il existe également une disposition de table. Ces 2 sujets méritent attention particulière, nous en parlerons donc dans des articles séparés.
Élément

est un conteneur qui peut inclure d'autres éléments, ainsi que d'autres conteneurs

. À l'étiquette

Il existe un attribut align, qui est responsable de la manière de positionner le conteneur sur la page. U de cet attribut il y a des valeurs gauche, centre, droite. Écrivons le code dans lequel nous placerons les éléments diverses pièces navigateur:

Texte de gauche

Texte centré

Texte correct

Dans cet article, vous avez appris aligner le texte sur la page HTML.

Dans cet article je vais vous expliquer comment placer un bloc div centré. Il existe de nombreuses façons, mais toutes ne vous permettent pas de faire exactement ce qui est requis. Je vais donner des exemples des méthodes les meilleures et les plus simples.

En général, il existe une douzaine de façons d'aligner correctement bloc div au centre, chaque webmaster utilise ses favoris\les plus moyen pratique. Mais néanmoins, il existe plusieurs méthodes de base, les plus populaires et les plus universelles. Et bien sûr, valable selon toutes les normes modernes.

Et oui, cela vaut la peine de dire tout de suite que ces méthodes peuvent ne pas fonctionner dans ie6 ou quelque chose de similaire. Je n'y prête même pas attention ce navigateur, peu importe le nombre de personnes qui l'utilisent. Il est temps d'arrêter d'utiliser des vieux trucs.

Alors qu'est-ce qu'on a ?

Méthode 1. Le plus cool

marge : 0 automatique ;

Très méthode efficace, ce qui vous permet également d'aligner les retraits en haut et en bas. Quelle est l’astuce de la méthode ? Tout est juste fou. Nous avons un bloc avec une certaine largeur (en pixels ou en pourcentage), auquel nous définissons la même indentation à droite et à gauche à l'aide de la propriété « auto », et nous obtenons ainsi un bloc div centré. La première valeur (0 dans l'exemple) correspond au remplissage supérieur et inférieur.

Par exemple, pour l'alignement supérieur, nous écrivons :

Marge : 10px automatique ;

Pour aligner le haut et le bas :

Marge : 10 px auto 5 px ;

À mon avis, c'est le plus meilleure façon centrer les blocs. De plus, c’est tout à fait valable.

Méthode 2. Intérêt

Si le bloc a une largeur en pourcentage, alors nous pouvons aligner div centré appliquer un remplissage égal pour amener la pleine largeur à 100 %. Pour ceux qui ne comprennent pas, je vais vous montrer avec un exemple, c'est plus simple ainsi :

Nous avons un bloc d'une largeur de 50%, pour l'aligner au centre, nous devons faire des marges latérales de 25% respectivement à droite et à gauche. Regardons le code :

Sans forcer, on obtient un bloc au centre, aligné avec des mathématiques banales (50 + 25 + 25) :)

Méthode 3. Mixte

Cette méthode a été recommandée dans les commentaires homme.

Comme je l’ai mentionné au début de l’article, il existe de nombreuses façons de centrer un bloc. Chacun choisit celui qu'il préfère. J'attends des commentaires et de nouvelles façons :)

Méthode 4 : Utiliser un bloc supplémentaire

Chemin Vainqueur dans les commentaires :

Aucune des deux méthodes ne résout le problème des flotteurs à l'intérieur d'un bloc si la largeur du bloc n'est pas connue (par exemple, un menu).

Dans de tels cas, j'utilise bloc supplémentaire, qui enveloppe le bloc en cours d'alignement. Le style ressemble à ceci :

#dop-block ( position : relative ; float : droite ; droite : 50 % ; ) #block ( position : relative ; float : gauche ; gauche : 50 % ; )

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

Tableau 1. Façons d'aligner le texte

Alignement à gauche	Alignement à droite	Alignement central	Justification
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 l'alignement à gauche, où le texte de gauche est poussé vers le bord tandis que le texte de droite reste irrégulier. L’alignement à droite et au centre est principalement utilisé dans les titres et sous-titres. Soyez conscient que lorsque vous utilisez une justification dans votre texte, il peut y avoir des apparences entre les mots. grands intervalles

, ce qui n'est pas très sympa.

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 possible d'aligner un bloc de texte à l'aide d'une balise

avec un attribut d'alignement similaire, comme indiqué dans le tableau. 2.	Tableau 2. Aligner le texte à l'aide du paramètre align
	Code HTML Description texte, aligné à gauche par défaut. De petits retraits verticaux sont automatiquement ajoutés avant et après les paragraphes.
Texte	Alignement central.
Texte	Alignement à gauche.
Texte
Texte	Alignement en largeur.
Texte	Désactive transfert automatique lignes, même si le texte est plus large que la fenêtre du navigateur.
Texte	Permet au navigateur d'effectuer un saut de ligne emplacement spécifié, même si la balise est utilisée .
Texte	Alignement central.
Texte	Alignement à gauche.
Texte	Bon alignement.
Texte	Alignement en largeur.

L'alignement à gauche des éléments est défini par défaut, il n'est donc pas nécessaire de le spécifier à nouveau. Donc align="left" peut être omis.

Différence entre paragraphe (balise

) et étiquette

est qu'un retrait vertical apparaît en début et en fin de paragraphe, ce qui n'est pas le cas lorsqu'on utilise une balise

.

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 un tel cas

définir l’alignement.

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 dimensions hors tout lion, mais en même temps taille plus petite

cellules. 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

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'à 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. Il y a donc

diverses manières

alignement au centre et à droite.

L'alignement des éléments est quelque chose que vous devez simplement savoir lors de cette opération. La première chose à 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 présence de plus

Vous pouvez ajouter une image, également alignée au centre, allons aussi à 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 proposé méthode universelle alignement des é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 y a trois significations : " 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 regarde le mien cours gratuit avec un exemple de création d'un site internet sur HTML: