Quelles sont les valeurs d'attribut de l'attribut display en HTML ? Comment l'attribut display réalise-t-il le centrage horizontal et vertical ?

Quelles sont les valeurs d'attribut de l'attribut display en HTML ? Quelle est la signification ? Et comment l'attribut display en HTML réalise-t-il un centrage horizontal et vertical ? L'article d'aujourd'hui vous présentera la valeur de l'attribut display en HTML et comment réaliser un centrage horizontal et vertical de la valeur de l'attribut display en HTML. Deux méthodes sont présentées.

display Ici, je parle des quatre valeurs d'attribut les plus couramment utilisées​​inline, block, inlin-block et none.

Parlons d'abord de l'inline (n élément en ligne) :

Cette valeur d'attribut est la valeur par défaut. Cet élément sera affiché comme un élément en ligne sans saut de ligne avant ou après l'élément. Cette valeur d'attribut n'est généralement pas définie. D'après ma compréhension personnelle, ce n'est pas différent des éléments en ligne normaux, Block et inline-block sont plus couramment utilisés.

Ensuite, il y a la valeur d'attribut du bloc (élément de niveau bloc) :

Cette valeur d'attribut est plus intéressante. Elle est définie pour que l'élément de niveau bloc. occupe une ligne exclusive, en ce qui concerne les sauts de ligne, l'effet est le même que celui de la balise p, mais une fois cette valeur d'attribut définie, en tant qu'élément de niveau bloc, elle a une largeur, une hauteur et une distance entre elles. il et d'autres éléments au niveau du bloc. Le paramètre d'attribut de marge et le remplissage du paramètre d'espacement, mais ne peuvent pas définir la hauteur de ligne.

Il y a aussi la valeur d'attribut de inline-block :

Cette valeur d'attribut est relativement puissante, je l'ai essentiellement vue lorsque j'ai commencé à apprendre. être défini tant qu'il n'est pas renvoyé à la ligne. D'une part, il peut être utilisé comme élément de niveau bloc et peut avoir les caractéristiques d'un bloc. D'autre part, comme je suis débutant, c'est gênant. pour définir le centre. Tous ceux qui utilisent cette valeur d'attribut peuvent définir la hauteur de la ligne afin que le texte soit centré pour faciliter son utilisation.

Ces attributs sont très utiles pour l'implémentation de cette barre de navigation. Les deux valeurs d'attribut​​block et inline-block sont principalement utilisées comme implémentation de plusieurs éléments dans le. même ligne, et le bloc est utilisé comme implémentation de sauts de ligne entre les éléments. Tout le monde peut l'essayer.

Pour la dernière valeur d'attribut none :

Personnellement, je pense qu'il est plus pratique de masquer les éléments lorsque la souris flotte, modifiez la valeur de l'attribut d'affichage en. obtenir un affichage. Effet avec des éléments cachés.

Quelles sont les valeurs d'affichage couramment utilisées en HTML ? Jetons un coup d'œil à

L'affichage en HTML est relativement facile à utiliser dans le développement normal d'un projet. Les valeurs principales sont :

• aucun (l'élément ne sera pas affiché)

• block (l'élément sera affiché sous forme de élément de niveau bloc, et l'élément sera précédé et suivi de sauts de ligne);

• inline (l'élément sera affiché comme un élément en ligne, sans saut de ligne avant et après l'élément);

• inline- block (élément de bloc en ligne. Nouvelle valeur dans CSS2.1

• table (l'élément sera affiché sous forme de tableau au niveau d'un bloc, similaire à

  , avec des sauts de ligne avant et après le tableau );

  table-row (l'élément sera affiché sous forme de ligne de tableau , similaire à

  );

  table-cell (l'élément sera affiché sous forme de cellule de tableau, similaire à

  et

  ). L'affichage permet un centrage horizontal et vertical ! Utilisez la position et la marge pour centrer les éléments horizontalement et verticalement ; je pense que tout le monde le connaît et l'utilise fréquemment. Mais je me demande si vous avez déjà utilisé display: table et table-cell pour centrer des éléments horizontalement et verticalement ? Voici deux façons d'utiliser display: table-cell pour centrer les éléments horizontalement et verticalement : 1 Utilisez display: table et table-cell pour centrer les éléments horizontalement et verticalement. Structure : <div class="wrap"> <div class="box"> <div class="con">梦幻雪冰</div> </div> </div> Style : .wrap { /*让元素以表格形式渲染*/ display: table; height: 400px; width: 400px; background: #fcf; } .box { /*让元素以表格的单元素格形式渲染*/ display: table-cell; /*使用元素的垂直对齐*/ vertical-align: middle; } .con { width: 200px; height: 200px; margin: 0 auto; background: #999; } Avantages : Cette méthode ne sera pas comme les deux méthodes précédentes De même , il y a une limite de hauteur.Cette méthode peut modifier dynamiquement la hauteur en fonction du contenu de l'élément, il n'y a donc pas de limite d'espace. Le contenu de l'élément ne sera pas coupé ou des barres de défilement laides apparaîtront en raison d'un espace insuffisant. Inconvénients : Quelles sont les lacunes ? Cette méthode ne convient qu'aux navigateurs modernes et ne fonctionnera pas correctement sous IE6-7. 2. Utilisez display: table-cell pour centrer les éléments horizontalement et verticalement Structure : <div class="wrap"> <div class="box"> 梦幻雪冰 </div> </div> Style : .wrap { display: table-cell; width: 400px; height: 400px; background: #fcf; vertical-align: middle; } .box { width: 200px; height: 200px; margin: 0 auto; background: #999; } Avantages : Les avantages de cette méthode sont les mêmes que ceux de la troisième méthode, et il n'y aura aucune restriction de hauteur. Inconvénients : IE6 et IE7 ne sont pas pris en charge [Recommandations associées] Qu'est-ce que le Web en HTML5 ? Quels sont les éléments du stockage Web ? Quels sont les attributs de la balise HTML IMG ? Apprenez à utiliser la balise IMG 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! Étiquettes associées： HTML中的display属性值有哪些 HTML中的display属性怎么实现水平垂直居中的 source：php.cn Article précédent：Analyse des problèmes de noyau du navigateur et de compatibilité du navigateur Article suivant：Quelles sont les différences spécifiques entre l’utilisation du XHTML et du HTML, et comment les distinguer ? Déclaration de ce site Web 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 Derniers articles par auteur Que peut faire le framework React ? Introduction détaillée au framework React (avec des exemples d'utilisation complets) 2018-09-11 16:45:17 Comment créer une application en utilisant React ? Détails des étapes pour créer des applications à grande échelle avec React+Redux 2018-09-11 16:39:07 Comment implémenter la connexion dans React ? Explication détaillée du module de connexion React 2018-09-11 16:29:40 Comment utiliser React ? Explication détaillée de l'utilisation de React (avec exemples inclus) 2018-09-11 16:10:13 Quelles sont les nouveautés de React 16 ? Introduction aux nouvelles fonctionnalités et fonctions de React16 2018-09-11 16:05:55 Quelles connaissances dois-je acquérir sur React ? Résumé des points de connaissance de réaction (avec des exemples complets) 2018-09-11 16:01:50 Quelles sont les fonctions de réagir ? Analyse détaillée de la fonction de réaction (avec exemples) 2018-09-11 15:55:13 Quel est le cycle de vie de Reactjs ? Introduction détaillée au cycle de vie de Reactjs 2018-09-11 15:50:18 Comment utiliser React.js ? Introduction à l'utilisation simple de React.js (avec exemples) 2018-09-11 15:43:40 Quelles sont les utilisations des références de composants React ? Explication détaillée du rôle des références de composants de réaction et de son utilisation 2018-09-11 15:34:44 Derniers numéros Comment personnaliser l'attribut d'identifiant VSCode ? Je suis récemment passé d'Atom à VSCode, et même si j'ai réussi à personnaliser la plupart... Depuis 2024-03-31 14:13:45 0 1 373 Rubriques connexes Plus> Comment supprimer une base de données nouvelles fonctionnalités de jdk8 La différence et la connexion entre Java et Javascript Quelle est la touche de raccourci pour la taille du pinceau ? obtenirelementbyid Comment utiliser le stockage cloud bootsql.dat Comment désinstaller la restauration en un clic Recommandations populaires Que signifie l'URL ? Que signifie DOM ? Comment changer la taille de l'image Comment mettre la police en gras en HTML Comment définir la taille des images HTML Tutoriels populaires Plus> Tutoriels associés Recommandations populaires Derniers cours Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne) 1417114 Premier tutoriel d'introduction à PHP : Apprenez PHP en une semaine 4258044 Tutoriel vidéo JAVA pour débutants 2477778 Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle 503996 Tutoriel d'introduction PHP base zéro 844297 Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne) 1417114 temps d'étude Tutoriel vidéo JAVA pour débutants 2477778 temps d'étude Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle 503996 temps d'étude Introduction rapide au développement web front-end 215294 temps d'étude Maîtrisez les didacticiels vidéo PS à partir de zéro 877569 temps d'étude [Web front-end] Démarrage rapide de Node.js 6435 temps d'étude Collection complète de cours full-stack de développement Web étranger 5055 temps d'étude Aller au langage pratique GraphQL 4249 temps d'étude Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape 633 temps d'étude Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures 21607 temps d'étude Derniers téléchargements Plus> effets Web Code source du site Web Matériel du site Web Modèle frontal [bouton de formulaire] Code de contact du formulaire de message d'entreprise jQuery [Effets spéciaux du joueur] Effets de lecture de boîte à musique HTML5 MP3 [Navigation dans les menus] Effets spéciaux du menu de navigation d'animation de particules cool HTML5 [bouton de formulaire] Code d'édition par glisser-déposer du formulaire visuel jQuery [Effets spéciaux du joueur] Code du lecteur de musique Kugou imitation VUE.JS [effets spéciaux HTML5] Jeu de boîte de poussée HTML5 classique [Effets spéciaux d'image] défilement jQuery pour ajouter ou réduire des effets d'image [Effets d'album photo] Effet de zoom de survol de la couverture de l'album personnel CSS3 [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches [Modèle frontal] Modèle Web de CV de travail créatif de concepteur [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet [Modèle frontal] Modèle de site Web de service de trading de devises de style violet [Matériau PNG] Matériau vectoriel d'éléments d'été mignons (EPS+PNG) [Matériau PNG] Matériel vectoriel de quatre badges de graduation rouges 2023 (AI+EPS+PNG) [image de bannière] Oiseau chantant et chariot rempli de fleurs design matériel vectoriel de bannière de printemps (AI + EPS) [Matériau PNG] Matériau vectoriel de chapeau de graduation doré (EPS+PNG) [Matériau PNG] Matériel vectoriel d'icône de montagne de style noir et blanc (EPS+PNG) [Matériau PNG] Matériel vectoriel de silhouette de super-héros (EPS+PNG) avec des capes de couleurs différentes et des poses différentes [image de bannière] Matériel vectoriel de bannière Arbor Day de style plat (AI + EPS) [Matériau PNG] Matériel vectoriel de neuf bulles de discussion explosives de style bande dessinée (EPS+PNG) [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches [Modèle frontal] Modèle Web de CV de travail créatif de concepteur [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet [Modèle frontal] Modèle de site Web de service de trading de devises de style violet À propos de nous Clause de non-responsabilité Sitemap Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！