Poursuivre ses "excavations CSS" une nouvelle idée se pose, pour désassembler un autre thème pertinent sur les os, qui concerne des blocs d'alignement uniformes en largeur. En principe, mes études de miniature que j'ai déjà postées dans mon blog, mais depuis le passé, mon travail a vraiment aimé la communauté Haba, j'ai décidé de faire une petite visière brève ici afin qu'aucune peine Habra-âme ne la manque à coup sûr. Ainsi, comme Gagarin dit: "Allons-y."
En général, dans les tâches de la pince surviennent périodiquement les moments où il est nécessaire d'aligner une liste de la largeur de l'écran. Dans ce cas, les éléments de cette liste doivent être égaux à uniformément, en appuyant sur leurs éléments extrêmes aux limites du conteneur et la distance entre eux devrait être identique.
La figure montre que les éléments sont égalisés en largeur, adjacents aux parois latérales et faisant des trindages entre eux - équivalent.
Comment ça fonctionne?
En substance, nous devons obtenir ce qui rend texte-alignement: justifier avec du texte. Étant donné que le comportement de nos blocs est très similaire au résultat de la nivellement de mots dans la ligne en utilisant cette propriété particulière. Je pense que beaucoup sont déjà sur le point de représenter que c'est une propriété et son travail approximatif.* Dans cet examen, je n'ai pas publié l'analyse des étapes de l'algorithme entier, vous pouvez en lire à ce sujet dans l'article lui-même. L'essentiel est que vous comprenez l'essence.
Notre tâche
Notre tâche est de créer une décision sur la base de cet algorithme. Appliquer, simuler, remplacer, faire quelque chose, la principale chose à la fin d'obtenir ce que nous voulons. À savoir, des éléments alignés uniformément dans la corde, dont le côté est pressé contre leurs frontières. Et bien sûr, la distance (espaces) entre ces éléments doit être absolument identique à toute largeur du conteneur.* Je souhaite immédiatement signaler que les options (travailleurs et pas très) ont réellement avéré 4 pièces, ainsi qu'un autre groupe de nuances démontées intéressantes et utiles, sur article énorme (dans mon style). Par conséquent, je vais en décrire certains d'entre eux à l'humeur :)
Options 3.
Mais la troisième option est déjà construite sur l'algorithme Text-Aligner et les blocs inline, qu'ils ont apporté leurs fruits, mais pas tout à fait. Premièrement, je devais diluer une liste d'excès, un élément supplémentaire, et d'autre part, IE6-7 montré faits intéressants, fouille dans lequel j'ai fait grand plaisir. Dans ces navigateurs cette solution A refusé de travailler du tout. Et devinez qui est venu m'aider. Vrai, selenit2! Mais il est venu seul, mais avec une idée magnifique (qu'il aboutit effronté de notre collègue commun sur le magasin de greentrash), à partir de laquelle j'ai été choqué. Comme il s'est avéré, une paire de propriétés magiques de CSS3 de l'antiquité profonde peut transformer cette solution en un navigateur croisé et faire du texte-alignement: justifier dans notre ancien IE6-7.L'ensemble du secret était dans la dernière ligne du code suivant:
Ul (police: 14px verdana, geneva, sans-Serif; text-align: justifier; / * réinitialiser pour le parent * / hauteur de la ligne: 0; taille de la police: 1px; / * 1px pour l'opéra * / / * Médecine pour IE6 -7 * / text-justifier: journal;)
Comme on peut le voir, en utilisant text-justifier: journal; UL, notre option devient un navigateur croisé. Cela est dû au fait que la propriété Text-Justify: Le journal est conçu pour augmenter ou diminuer les intervalles entre les lettres et entre les mots. MSDN déclare que cette chose est "la forme d'alignement la plus implantée pour l'alphabet latin", mais dans cet article, il reste encore un ajout que pour les textes arabes, cette propriété tire les lettres elles-mêmes.
Options 4.
Eh bien, l'option 4 est devenue un refus de marquage supplémentaire, ce qui a entraîné de nouveaux problèmes dans IE6-7.
Il s'avère que le texte-justifie: le journal permet uniquement d'étirer nos lettres (en ligne-block), mais pas une équipe. Mettez simplement, dit-il à la ligne, peu importe la façon dont il voulait qu'il soit étiré et text-alignement: justifier est une force de traction. Ceux. Text-ALIGN: Justify est responsable de l'étirement d'une chaîne et de Text-Justify: journal ne clarifie que exactement comment ces étirements se produiront.
Dans la révision de la 3ème version, j'ai dit que Selenit2 m'a suggéré deux propriétés, dont une (text-justifier: journal) nous a aidés dans la version précédente, et l'autre a aidé à cela! Et cette fois-ci, ils sont unis et déjà avec double puissance ont pu vaincre la dernière option.
Ul (police: 14px verdana, geneva, sans-Serif; text-align: justifier; / * réinitialiser pour le parent * / hauteur de la ligne: 0; taille de la police: 1px; / * 1px pour l'opéra * / / * Médecine pour IE6 -7 * / text-justifier: journal; zoom: 1; / * Activez la dernière chaîne * / text-align-align-dernier: justifier;)
Rencontrer! text-aligner-dernier - la propriété qui inclut l'algorithme Text-Align: justifier dans la ligne la plus récente du texte, s'il s'agit du plus de texte-alignement: justifier est appliqué à celui-ci. En termes simples, lorsque nous postuler au texte du texte habituel-alignement: justifier, puis en voyant cela, le Text-Align-dernier indique la première chose à laquelle il fait mal et ce qu'il devra faire fonctionner maintenant et dans la dernière ligne.
Au fait, ces propriétés sont spécifiées et non une région exclusive (à l'exception de la valeur du journal, qui est maintenant appelée autrement). Donc, aucun chaton ne souffrira) et je tiens à souligner que le bogue IE6-7 vient avec CSS3 - Qui d'autre a déjà vu? :)
En général, je tiens à résumer la révision, je tiens à dire que je suis heureux d'avoir réussi à trouver une décision vraiment digne. Et ce n'est pas facile à trouver, mais de tout comprendre et de l'amener à un crossbrustre absolu, dépenser le code minimum et ne pas déchets de marquage.
Si un résumé Quelqu'un semblait un peu, puis je recommande de lire cet article (déjà plus grand) avec une analyse approfondie des vols. Mais, je vous avertit! L'article n'est vraiment pas petit, alors avant de commencer à lire, il est préférable de stocker vos biscuits préférés avec du thé :)
Tags: Ajouter des tags
Bonne journée. En contact, Alexey Gulein. Dans le dernier article, nous sommes démontés Tags HTML pour travailler avec du texte . Il est temps de comprendre comment aligner le texte sur page html . Si vous remarquez, tout ce que vous avez été gagné avec vous, s'aligne sur le bord gauche du navigateur, avec rien que nous faisons, donc arrangé par défaut. Que dois-je faire pour égaliser le contenu, disons, au centre ? Je pense qu'une étiquette obsolète vient
Texte sur le côté gauche
Texte central
Après avoir ouvert une page dans le navigateur, nous verrons que le texte est réellement situé au centre de la page.
Je veux attirer votre attention à quel moment: vous pouvez décider de quoi s'il y a une étiquette
Que faisons-nous si nous voulons placer les objets à droite? Considérons le concept de conteneur
Élément
Dans cet article que vous avez appris aligner le texte sur la page HTML.
La propriété Text-Align de CSS est responsable de l'alignement de texte horizontalement, ainsi que des images et d'autres éléments. Les propriétés ont 4 options possibles Alignement.
CSS Text-Aligner la syntaxe
... Texte-Aligner: centre | Justifier | À gauche | Droit | hériter.; ...
- centre - nivellement au centre de la région (par exemple, la largeur de la superficie de 500 pixels, ce qui signifie qu'il y aura un alignement de niveau de 250 pixels)
- justifier - étirer du texte sur toute la largeur de la région
- gauche - nivellement au bord gauche
- droite - alignement sur le bord droit
- hériter - prenez la valeur de l'ancêtre (parent)
Le plus souvent, ces propriétés sont utilisées dans des blocs.
Noter:
Il existe également une propriété verticale-alignement responsable de l'alignement vertical.
Comment faire un alignement de texte dans HTML
Exemple numéro 1.
Nivellement du texte sur le bord gauche. Agir par défaut.
Nivellement du texte sur le bord gauche
Nivellement du texte sur le bord gauche
Exemple numéro 2. Aligner le texte et les images au centre
Texte de nivellement au centre. Sont souvent utilisés pour le titre d'articles ou de dériver des images au centre.
Texte de nivellement au centre
La page est convertie en ce qui suit
Nivellement du texte sur le bord gauche
Exemple numéro 3. Nivellement du texte sur le bord droit
Nivellement du texte sur le bord droit.
Nivellement du texte sur le bord droit
La page est convertie en ce qui suit
Nivellement du texte sur le bord droit
Exemple numéro 4. Nivellement du texte dans la largeur de la zone entière
Niveler le texte sur la largeur. Il s'avère que l'alignement survient à la fois sur le terrain et sur le bord droit. Le navigateur ajoute automatiquement des espaces.
La page est convertie en ce qui suit
Nivellement du texte dans la largeur de la zone entière
Parfois text-align: justifier; peut ne pas fonctionner. Cela est dû à l'héritage et même avec le travail du navigateur. En général, il n'est pas recommandé d'utiliser ce paramètre.
NoterAu lieu de la propriété Text-Align, vous pouvez également utiliser l'attribut Align, qui est écrit avec la balise. Il peut être utilisé dans différentes tags. Par example:
Alignement au centreNivellement du texte dans la largeur de la zone entière
... ...
La différence de balises
Que ce dernier rend la transition à nouvelle chaîne (indent vertical) et Div ne le fait pas.
Chaque couche est constamment confrontée à la nécessité d'aligner le contenu dans le bloc: horizontalement ou verticalement. Il y a de bons articles sur ce sujet, mais ils offrent tous beaucoup de choses intéressantes, mais peu d'options pratiques, à cause de laquelle vous devez passer trop de temps à mettre en valeur la principale chose. J'ai décidé de soumettre ces informations dans le formulaire qui est pratique pour moi de ne plus googler Google.
Aligner des blocs avec des tailles connues
Le moyen le plus simple consiste à utiliser CSS pour aligner des blocs qui ont une hauteur pré-connue (pour un alignement vertical) ou une largeur (pour l'alignement horizontal).
Alignement avec rembourrage
Parfois, vous ne pouvez pas centrer l'article, mais ajouter la frontière avec la frontière " rembourrage".
Par exemple, il y a une image de 200 par 200 pixels et il est nécessaire de le centrer dans le bloc de 240 à 300. Nous pouvons définir la hauteur et la largeur par le bloc externe \u003d 200px et ajouter à 20 pixels d'en haut et ci-dessous, et 50 à gauche et à droite.
.example-wrapper1 (arrière-plan: # 535E73; largeur: 200px; hauteur: 200px; rembourrage: 20px 50px;)Alignement des blocs absolument positionnés
Si le bloc est défini " position: absolu.", alors il peut être positionné par rapport au parent le plus proche avec" Position: relatif ". Pour cela, vous devez toutes les propriétés (" haut.","droite","bas","la gauche.") L'unité interne est attribuée à la même valeur que" Marge: auto ".
* Il y a une nuance: la largeur (hauteur) de l'unité intérieure + la valeur gauche (droite, bas, haut) ne doit pas dépasser la taille du bloc parent. Propriétés de gauche fiables (droite, bas, haut) Attribuez 0 (zéro).
.Example-Emballeur2 (Position: Relative; Hauteur: 250px; Arrière-plan: URL (espace.jpg);) .cat-king (largeur: 200px; hauteur: 200px; Position: absolu; haut: 0; gauche: 0; bas: 0; bas: 0; bas: 0; droite: 0; Marge: Auto; Fond: URL (King.png);)Alignement horizontal
Alignement par "Text-Align: Centre"
Aligner le texte dans le bloc, il y a une propriété spéciale " text-aligner.". Avec la valeur définie" centre"Chaque ligne de texte est nivelée horizontalement. Pour le texte multiligne, une telle solution est utilisée extrêmement rare, plus souvent, cette option peut être trouvée pour l'alignement des couvre-efforts, des liaisons ou des images.
Une fois que je devais inventer le texte pour montrer comment fonctionne l'alignement du texte lorsque cSS aide, mais rien d'intéressant à l'esprit n'est venu. Au début, j'ai décidé de copier quelque part dans le poème pour enfants quelque part, mais je me suis souvenu de cela, recourez le caractère unique de l'article et nos chers lecteurs ne pourront pas le trouver dans Google. Et puis j'ai décidé d'écrire cela ce paragraphe - après tout, l'essence n'est pas avec elle, mais l'essence en alignement.
.Example-text-text (text-alignement: centre; rembourrage: 10px; arrière-plan: # ff90b8;)Il convient de noter que cette propriété fonctionnera non seulement pour le texte, mais aussi pour tout Éléments de luxe ("Affichage: Inline").
Mais ce texte est aligné sur le bord gauche, mais c'est dans le bloc qui est nivelant par rapport à l'emballage au centre.
.Example-exemple-wrapper3 (text-alignement: centre; arrière-plan: # ff90b8;) .Inline-text (Affichage: Inline-Block; Largeur: 40%; Rembourrage: 10px; Text-Align: gauche; Contexte: # FFE5E5;)Bloquer l'alignement avec la marge
Les éléments de blocs avec une largeur bien connue sont facilement alignés horizontalement, si vous installez "Margin-gauche: auto; marge-droite: auto". Habituellement une entrée abrégée est utilisée: " marge: 0 Auto"(Au lieu de zéro, il peut y avoir une signification). Mais pour le nivellement vertical, cette méthode ne convient pas.
.Lama-wrapper (hauteur: 200px; arrière-plan: # f1bf88;) .Lama1 (hauteur: 200px; largeur: 200px; arrière-plan: URL (lama.jpg); marge: 0 auto;)C'est ainsi qu'il est nécessaire d'aligner tous les blocs, dans la mesure du possible (où le positionnement fixe ou absolu n'est pas requis) est le plus logique et adéquat. Bien qu'il semble évident, mais parfois, j'ai vu les exemples effrayants avec des retraites négatives, j'ai donc décidé de clarifier.
Alignement vertical
DE alignement vertical loin plus de problèmes - Apparemment, cela dans CSS n'a pas été fourni. Il existe plusieurs façons d'atteindre le résultat souhaité, mais tous ne sont pas très beaux.
Alignement de la hauteur de la ligne
Dans le cas où une seule ligne dans le bloc, il est possible d'atteindre son alignement vertical en appliquant la propriété " hauteur de la ligne"Et la réglage de la hauteur désirée. Pour la fiabilité, il est nécessaire d'installer une" hauteur ", la valeur qui sera égale à la valeur de" hauteur de la ligne ", car ce dernier n'est pas pris en charge dans tous les navigateurs.
.Example-Emballeur4 (hauteur de la ligne: 100px; couleur: # DC09C0; arrière-plan: # e5dae1; hauteur: 100px; text-alignement: centre;)Il est également possible d'obtenir un alignement de bloc avec plusieurs lignes. Pour ce faire, vous devrez utiliser un emballage de bloc supplémentaire et définir la hauteur de la ligne. L'unité interne peut être multiligne, mais nécessairement "en ligne". Vous devez appliquer "vertical-alignement: milieu".
.Example-exemple-wrapper5 (hauteur de ligne: 160px; hauteur: 160px; taille de la police: 0; arrière-plan: # ff9b00;) .Example-wrapper5 .text1 (Affichage: en ligne-block; taille de la police: 14px; hauteur de la forme: 1.5; alignement vertical: milieu; fond: # fFFAf2; couleur: # ff9b00; text-alignement: centre;)L'unité d'emballage doit être installée "Taille de la police: 0". Si vous ne définissez pas la taille de la police zéro, le navigateur ajoutera plusieurs pixels inutiles de lui-même. Vous devez également spécifier la taille de la police et la hauteur de la chaîne pour le bloc intérieur, car ces propriétés sont héritées du parent.
Alignement vertical dans les tables
Propriété " aligner verticalement"Agit également sur les cellules de la table. Avec la valeur" moyenne ", la teneur à l'intérieur de la cellule est alignée au centre. Bien sûr, une disposition de table à notre époque est considérée comme une archaïque, mais dans des cas exceptionnels, il est possible. simuler, indiquant " affichage: cellule de table".
Habituellement pour un alignement vertical, j'utilise cette option. Au-dessous de l'exemple de la disposition prise du projet prêt à l'emploi. L'intérêt est la photo qui est centrée par la verticale de cette manière.
.One_Product .img_wrapper (affichage: cellule de table; hauteur: 169px; alignement vertical: milieu; Overflow: caché; fond: #fff; largeur: 255px;). Sone_product img (max-hauteur: 169px; max-largeur: 100 %; min-largeur: 140px; Affichage: bloc; marge: 0 auto;)Il convient de rappeler que si l'élément est installé "float" est différent de "Aucun", il sera bloqué dans tous les cas (Affichage: Bloc) - alors vous devrez utiliser un bloc de bloc supplémentaire.
Alignement d'un élément en ligne supplémentaire
Et pour des éléments en ligne, vous pouvez appliquer " vertical-alignement: milieu". En même temps, tous les éléments avec" affichage: Inline", Qui sont en une ligne, sont nivelés par rapport à la ligne centrale totale.
Il est nécessaire de créer un bloc auxiliaire avec une hauteur égale à la hauteur du bloc parent, puis le bloc souhaité est nivelé au centre. Pour ce faire, il est pratique d'utiliser des pseudo-éléments: avant ou: après.
.Example-exemple-wrapper6 (hauteur: 300px; text-alignement: centre; arrière-plan: # 70daf1;) .pudge (Affichage: Inline-Block; Vertical-Aligner: Moyen; Arrière-plan: URL (PUGE.PNG); Couleur de fond: # FFF; largeur: 200px; Hauteur: 200px; )Riki (Affichage: Inline-Block; Hauteur: 100%; vertical-alignement: milieu;)Affichage: flex et alignement
Si vous n'êtes pas très intéressé par les utilisateurs de l'explorateur 8 ou des soins que vous êtes prêt à insérer une pièce de JavaScript inutile, vous pouvez utiliser "Afficher: flex". Les blocs Flex s'adaptent parfaitement aux problèmes d'alignement et il suffit d'écrire "Marge: auto" pour centrer le contenu à l'intérieur.
Jusqu'à présent, une telle manière ne me rencontrait pratiquement pas, mais il n'y a pas de restrictions particulières pour lui.
Eh bien, c'est tout ce que je voulais écrire sur Alignement CSS. Maintenant, le centrage du contenu ne sera pas un problème!
HTML Il y a un paramètre universel et on appelle l'alignement. Il peut être appliqué avec diverses tags HTML:
p | H1 | Div | Table | THEAD | Tody | Tfoot | TR | Th | Td.
Valeurs possibles:
Centre - Alignement au centre
La gauche. - Alignement sur le côté gauche
Droite - droite
Justifier. - En largeur, à gauche et à droite. Dans ce cas, l'apparition de grandes lacunes entre les mots.
Niveaux de texte en largeur
Apparence dans le navigateur:
Le titre est nivelé au centre
Le texte est aligné en largeur. Le texte est aligné en largeur. Le texte est aligné en largeur. Le texte est aligné en largeur. Le texte est aligné en largeur. Le texte est aligné en largeur. Le texte est aligné en largeur. Le texte est aligné en largeur. Le texte est aligné en largeur. Le texte est aligné en largeur. Le texte est aligné en largeur. Le texte est aligné en largeur.
Le contenu de ce bloc est aligné sur le côté droit.
Je note que le nivellement sur le bord gauche est automatiquement. Par conséquent, cette valeur du paramètre Align à spécifier n'est pas nécessaire.
