Partagez un exemple de didacticiel sur le centrage vertical du texte saisi et les problèmes d'alignement des boutons

1. Problème de modèle de boîte : Veuillez réinitialiser le CSS

2. Les boutons ne sont pas alignés : Veuillez flotter ou verticalement. -align:middle;Ensuite calculez la largeur et la hauteur pour les aligner

3. non centré : attribut line-height Remarque : IE8 ne prend pas en charge l'écriture de polices (ou un certain style ne la prend pas en charge)

Le navigateur IE a été testé pour IE8, utilisez IE5 , 6 et 7 avec prudence.

Cause du problème : Modèle de boîte

1. Modèle de boîte :

Mettez 2 entrées sur la page, une zone de texte et un bouton bouton. (Définissez la largeur et la hauteur sans aucun autre style)

input[type='text']{width:400px;height:45px;}

input[type='button']{width : 45px;hauteur:45px;}

Observation : IE8 : bordure de la zone de texte :1px;padding:2px;

Bordure du bouton :3px;padding:1px 8px;

Firefox ：Bordure de la zone de texte:1px;padding:2px;

Bordure du bouton:3px;padding:0px 8px;

Google : Bordure de la zone de texte:2px;padding:1px 0px;

Bordure du bouton :2px;padding:1px 6px;

Ajouter un style pour que la bordure et le remplissage soient identiques

input[type='text']{width :400px ;hauteur:45px;bordure:1px rouge uni;padding:0;}

input[type='button']{width:45px;height:45px;border:1px rouge uni;padding:0 ;}

Observation :

IE8 : Bordure de la zone de texte : 1px; contenu : 202x47 (modèle de boîte d'IE)

Bordure du bouton : 1px; contenu : 45x45 (modèle de boîte d'IE ) )

Firefox : Bordure de la zone de texte : 1px; contenu : 200x45

Bordure du bouton : 1px; contenu : 43x43

Google : Bordure de la zone de texte : 1px; contenu : 200x45

Bordure du bouton : 1px; contenu : 43x43

2. Méthode d'alignement du bouton : Flottant (La raison est que le décalage est différent et je n'ai pas cherché plus de connaissances . Vous pouvez compléter cet aspect par vos propres connaissances);

input[type='text']{width:400px;height:45px;border:1px solid red;padding:0;float:left;}
input[type='button ']{width:45px;height:45px;border:1px solid red;padding:0;float:left;}

Reportez-vous à l'étape 2, calculer la largeur et la hauteur par vous-même et alignez-les (Certains peuvent ne pas avoir de bordure, utilisez plutôt la couleur d'arrière-plan, veuillez définir border:0 ; ajustez la hauteur par vous-même)
input[type='text']{width :400px;hauteur:45px;bordure:1px rouge uni; padding:0;float:left;}
input[type='button']{width:47px;height:47px;border:1px rouge uni;remplissage : 0;float:left;}

3. Centrage du texte IE8 : hauteur de ligne Remarque : IE8 ne prend pas en charge l'écriture de polices

Remplacer la police : normale 18px "Microsoft Yahei "; avec taille de police : 18px; style de police : normal; famille de polices : "Microsoft Yahei" !

Ou (vous pouvez utiliser font:normal 18px "Microsoft Yahei" ; méthode d'écriture, mais ce n'est pas au milieu)
input[type='text']{width:400px;height:25px ; padding:10px 0px;border:1px rouge uni;float:left;}
input[type='button']{width:47px;height:47px;line-height: 47px;border:1px rouge uni;padding : 0;float:gauche;}

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!