Maison  >  Article  >  interface Web  >  Centrage de l'image CSS : l'image CSS est centrée vers le haut, le bas, la gauche et la droite (centrée horizontalement et verticalement)

Centrage de l'image CSS : l'image CSS est centrée vers le haut, le bas, la gauche et la droite (centrée horizontalement et verticalement)

PHPz
PHPzoriginal
2017-05-31 11:32:2410292parcourir

Dans la mise en page de notre page Web, nous devons souvent utiliser la mise en page DIV+CSS pour centrer l'image horizontalement, à gauche et à droite, et verticalement et verticalement. Comment implémenter cela ? Cet article résume plusieurs méthodes pour utiliser DIV+css pour centrer l'image à gauche et à droite/horizontalement et centrer l'image de haut en bas/verticalement !

Méthode de centrage gauche/droite des images CSS :

1.Comment centrer le texte et les images dans le code HTML ?

Centrage de limage CSS : limage CSS est centrée vers le haut, le bas, la gauche et la droite (centrée horizontalement et verticalement)

Centrage du texte HTML et code de méthode de centrage d'image HTML, en réalisant le centrage du texte et le centrage d'image en HTML Il existe trois méthodes pour réaliser le centrage du contenu du texte et de l'image en HTML. html. Deux d'entre eux sont implémentés à l'aide de styles CSS, en utilisant toujours "align="center"" (centré) ajouté à la balise html d'origine.

2. Résumé des différents centrages dans la mise en page CSS

Le centrage est une situation que l'on rencontre souvent lors de l'utilisation du CSS pour la mise en page. Lorsque vous utilisez CSS pour le centrage, parfois un seul attribut peut le faire, et parfois cela nécessite certaines compétences pour être compatible avec tous les navigateurs. Cet article donnera une brève introduction à certaines méthodes courantes de centrage.

Méthode de centrage de l'image CSS haut et bas/vertical :

1 À propos de l'attribut de transformation en CSS3 pour obtenir un rendu vertical et horizontal. centrage des divs à largeur et hauteur variables Introduction détaillée

Centrage de limage CSS : limage CSS est centrée vers le haut, le bas, la gauche et la droite (centrée horizontalement et verticalement)

Je crois que dans les projets réels, vous rencontrerez certainement le problème des DIV à largeur et hauteur variables, verticales et centrage horizontal. Je me souviens que j'avais déjà utilisé js pour l'implémenter. En fait, il existe plusieurs façons de l'implémenter avec CSS. Mais personnellement, je pense qu'il est plus simple et plus pratique d'utiliser la transformation, mais elle n'est pas compatible avec les navigateurs inférieurs à IE9.

2. Exemples détaillés de deux méthodes courantes pour réaliser le centrage horizontal et vertical des éléments en CSS

Cet article est principalement destiné à Nous avons introduit deux façons d'obtenir un centrage horizontal et vertical des éléments en CSS. L'article fournit un exemple de code complet pour votre référence et votre étude. Il a une certaine valeur de référence pour votre étude ou votre travail. ci-dessous. . 1. La disposition flexible de l'élément parent réalise le centrage horizontal et vertical de l'élément ; 2. Le positionnement absolu et la valeur de marge négative réalisent le centrage horizontal et vertical de l'élément. " Utilisez du CSS pur pour centrer une image de taille inconnue (mais dont la hauteur et la largeur sont inférieures à 200 px) horizontalement et verticalement dans un conteneur carré de 200 px. " Bien sûr, la question n'est pas aléatoire, mais a ses propres raisons pratiques. Le centrage vertical est Taobao. L'un des problèmes les plus courants rencontrés au travail est très représentatif

4 7 façons de centrer le conteneur horizontalement et verticalement avec CSS

Ce type de mise en page CSS est couramment utilisé, et c'est aussi une question d'entretien courante. Vous en trouverez beaucoup après une recherche en ligne, mais je veux quand même la résumer moi-même. Il existe de nombreuses méthodes de ce genre. Cet article n'en résume que quelques-unes pour approfondir l'impression.

Questions et réponses liées au centrage d'image DIV+CSS :

Comment centrer une image ?

2.
En CSS, pourquoi l'image n'est-elle pas centrée même si je définis vertical-align:middle;

3. Comment centrer les éléments de la page intégrée iframe. 4.

Le problème du centrage haut et bas des navigateurs Android

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn