Conseils utiles

Trois façons de centrer l'image html

Pin
Send
Share
Send
Send


L'utilisation de CSS est le moyen le plus optimal de centrer des images, des blocs de texte et même l'ensemble de la conception de pages Web. La plupart des propriétés de HTML align sont disponibles en CSS depuis la version 1.0. Ils fonctionnent très bien avec les navigateurs Web CSS3 et modernes:

CSS centrant les applications en HTML

Le centrage CSS peut être un problème pour les concepteurs Web novices. Il existe de nombreuses façons de le faire, mais elles ne s'appliquent pas toutes à chaque élément.

CSS peut être utilisé pour:

  • Centrer le texte
  • Centrer un élément de bloc (par exemple, div)
  • L'image du centre
  • Centrez le bloc ou l'image verticalement.

Il y a de nombreuses années, les concepteurs Web pouvaient utiliser pour centrer des images et du texte. Mais maintenant, cette balise est obsolète et n'est plus supportée par les navigateurs modernes. Cela est dû au fait que les sites modernes doivent avoir une séparation claire de la structure et des styles.

Centrage de texte CSS

Le moyen le plus simple de centrer le texte sur une page Web. Pour ce faire, vous n'avez besoin que d'une propriété: HTML text align:

Avec cette ligne de code, chaque paragraphe avec la classe center sera centré horizontalement dans son élément parent.

Applications de cette classe:

Lorsque vous alignez du texte au centre à l'aide de la propriété text-align, n'oubliez pas qu'il sera centré à l'intérieur du conteneur qui le contient, et pas nécessairement par rapport à la page entière.

Centrer les blocs de contenu à l'aide de CSS

Les blocs sont des éléments d'une page qui sont définis en tant qu'éléments de niveau bloc et ont une certaine largeur. De tels blocs sont souvent créés en utilisant

Le moyen le plus courant de centrer des blocs consiste à définir le remplissage gauche et droit sur auto:

Cette forme abrégée de la propriété margin définira les marges supérieure et inférieure sur 0, tandis que les marges gauche et droite utiliseront auto. Ainsi, tout l’espace disponible est occupé et divisé uniformément entre les deux côtés, ce qui équivaut à HTML div align.

Application HTML:

Le bloc ayant une certaine largeur, il sera centré à l'intérieur de l'élément le contenant. Le texte de ce bloc ne sera pas aligné au centre, mais à gauche. Par défaut, dans les navigateurs, le texte est aligné à gauche. Pour que le texte reste centré, utilisez la propriété text-align, décrite précédemment.

Centrage d'image CSS

La plupart des navigateurs affichent des images centrées lors de l'utilisation de la propriété d'alignement de texte HTML. Mais vous ne devriez pas compter sur cette méthode, car elle n’est pas recommandée par le W3C.

Au lieu de cela, vous devez indiquer explicitement à votre navigateur que l’image est un élément de niveau bloc. Voici le code CSS pour cela:

Voici le code HTML de l'image à centrer:

Vous pouvez également centrer des objets à l'aide de CSS inline:

Centrer les éléments verticalement avec CSS

L'alignement vertical HTML a toujours été problématique dans la conception Web, mais avec la publication de la spécification du module de disposition de boîte flexible CSS dans CSS3, une solution est apparue pour cette tâche.

L'alignement vertical fonctionne de la même manière que l'alignement horizontal décrit ci-dessus. Propriété vertical-align avec valeur moyenne:

L'inconvénient de cette approche est que tous les navigateurs ne prennent pas en charge CSS FlexBox. En cas de problèmes avec les versions précédentes des navigateurs, le W3C recommande de centrer le texte verticalement dans le conteneur à l'aide de la méthode suivante:

  • Placez les éléments à centrer à l'intérieur d'un élément de conteneur tel qu'un div,
  • Définir la hauteur minimale pour l'élément conteneur,
  • Déclarer un élément conteneur,
  • Définissez l'alignement vertical du HTML au milieu.

Centrage vertical et versions antérieures d'Internet Explorer

Il existe plusieurs façons de forcer IE à centrer des objets, puis à utiliser des commentaires conditionnels. La bonne nouvelle est que, du fait de la récente décision de Microsoft d’abandonner le support des anciennes versions d’IE, ces navigateurs devraient disparaître prochainement, ce qui permettra aux concepteurs Web d’utiliser plus facilement les approches de balisage modernes, telles que CSS FlexBox.

Cette publication est une traduction de l'article "Utiliser CSS pour centrer les images et autres objets HTML" préparé par l'équipe amicale du projet Internet Technology.ru

Pin
Send
Share
Send
Send