Comment aligner les deux extrémités en CSS ? Une brève analyse de diverses méthodes

Dans la mise en page d'un site Web, l'alignement du texte est un élément très important. Nous utilisons généralement l’alignement à gauche, au centre et à droite. Cependant, dans certains cas, nous devons utiliser justifié, également appelé « justifié ». La justification répartit uniformément le texte et améliore l’impact visuel. Même si la justification devient de moins en moins courante dans la conception de sites Web modernes, elle reste une technique très utile lorsque vous en avez besoin.

Il existe de nombreuses façons d’obtenir un alignement des deux côtés. Dans cet article, nous aborderons certaines des techniques les plus courantes, du CSS de base à certaines techniques avancées.

Conseils CSS de base

Les conseils CSS de base sont le moyen le plus simple, mais parfois le meilleur, d'obtenir un alignement. Nous pouvons définir le texte à justifier en utilisant la propriété text-align, comme indiqué ci-dessous :

p {
  text-align: justify;
}

Cette simple règle CSS alignera le texte du paragraphe aux deux extrémités. Cela peut produire de très bons résultats dans certaines situations, mais pas nécessairement dans d’autres. En effet, lorsque CSS est justifié, chaque ligne de texte remplit toute la largeur, provoquant un espacement inégal. Cela n’a peut-être pas l’air joli, mais nous avons plusieurs façons de résoudre ce problème. Un moyen simple de le faire est d'augmenter le crénage, via la propriété letter-spacing :

p {
  text-align: justify;
  letter-spacing: 2px;
}

Cela ajoutera 2 pixels d'espace entre le texte du paragraphe. Bien que cela puisse entraîner la division de certains mots en plusieurs mots et des sauts de ligne à des endroits inappropriés. Cependant, si votre texte est principalement en anglais, cela ne pose pas vraiment de problème. Cependant, si votre texte est en chinois, vous souhaiterez peut-être augmenter le crénage entre le chinois et l'anglais.

Pour éviter que les mots ne soient fragmentés, nous pouvons utiliser une autre propriété CSS : text-justify. text-justify fait partie de CSS3 qui contrôle la façon dont les lignes de texte sont alignées. Trois valeurs sont disponibles pour cet attribut : auto, aucun et inter-mots. auto est la valeur par défaut et les lignes sont alignées avec les types gauche, droite et central. Inter-word utilise l'espacement entre les mots et l'espacement des mots pour obtenir un alignement aux deux extrémités. Bien sûr, vous pouvez voir des espaces irréguliers, notamment au milieu des mots. Cela est généralement dû aux différences entre les différentes langues.

Une autre astuce pour garder les mots intacts consiste à utiliser le retour à la ligne. Cela divisera les mots longs aux endroits appropriés et évitera le fractionnement des mots. Vous pouvez utiliser les règles de style suivantes :

p {
   text-align: justify;
   word-break: break-all;
}

Cela brisera les mots partout et alignera le texte dans les marges. C'est plus complexe que la propriété d'espacement des lettres, mais pour les scénarios où le texte anglais doit être aligné, c'est une option à considérer.

Conseils CSS avancés

Les conseils CSS ci-dessus fonctionnent très bien pour les projets Web simples. Cependant, si vous souhaitez répartir le texte uniformément sans casser les mots ou le formatage du texte, vous aurez peut-être besoin de techniques avancées.

Distribuez uniformément les éléments enfants dans un conteneur en utilisant Flexbox

La mise en page Flexbox est un nouveau système de mise en page CSS qui vous offre un meilleur contrôle et une meilleure mise en page de votre site Web. Nous pouvons utiliser la fonction Flexbox des navigateurs modernes pour réaliser un alignement des deux côtés. Pour utiliser la disposition Flexbox, nous devons définir display:flex sur le conteneur.

.container {
  display: flex;
  justify-content: space-between;
}

Cette règle de style répartira uniformément tous les éléments du conteneur tout en conservant son propre format. La valeur space-between garantit un espace blanc approprié entre les éléments enfants dans le conteneur, réalisant ainsi l'alignement. Cette approche présente également l’avantage de s’adapter aux différentes tailles d’écran grâce à un design adaptatif.

Utilisez CSS Grid pour répartir uniformément les éléments enfants dans le conteneur

CSS Grid est un autre système de mise en page CSS moderne, plus flexible et plus puissant que Flexbox. Nous pouvons utiliser Grid pour obtenir un alignement des deux côtés :

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  justify-items: stretch;
  align-items: center;
}

Cette règle fait beaucoup de choses. Tout d’abord, il transforme le conteneur en grille et définit le nombre de colonnes pour la grille répétitive ainsi que la largeur minimale et maximale de chaque colonne. Ensuite, il définit un espaceur pour séparer les éléments enfants. Enfin, il définit la propriété justifier-items pour répartir uniformément les éléments enfants et la propriété align-items pour centrer verticalement tous les éléments enfants dans le conteneur. Cette méthode nécessite des compétences professionnelles en CSS, mais les résultats sont très efficaces.

Conclusion

Bien que justifié ne soit pas un élément indispensable dans toute conception de site Web, c'est une technique très utile qui peut améliorer les effets visuels. De l'utilisation basique de la propriété text-align à l'utilisation avancée de la disposition Flexbox et Grid, nous explorons différentes techniques pour réaliser l'alignement dans cet article. Quels que soient les besoins de votre site Web, ces conseils peuvent grandement contribuer à améliorer la lisibilité et l'esthétique de votre site.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!