Comment aligner verticalement un intérieur d'un ?-tutoriel CSS-php.cn

How to Vertically Align a Inside a ?

Alignement d'un Verticalement dans un

Considérez la situation suivante : vous avez un imbriqué dans un

, comme le montre ce code :

<div 
  id="theMainDiv"
  style="
    border:solid 1px gray;
    cursor:text;
    width:400px;
    padding:0px;"
>
  <span 
    id="tag1_outer" 
    style="
      background:#e2e6f0;
      padding-right:4px;
      padding-left:4px;
      border:solid 1px #9daccc;
      font:normal 11px arial;
      color:#3c3c3c"
  >as</span>
</div>

Copier après la connexion

Par défaut, le s'alignera sur le coin inférieur gauche du

. Pour centrer le champ dans le

verticalement, envisagez les approches suivantes :

Option 1 : Manipulation de la hauteur de ligne

Définissez la hauteur de ligne de l'enfant être égal à la hauteur du

#theMainDiv {
  height: 20px; /* Set the div height for reference */
}

#tag1_outer {
  line-height: 20px;
}

Copier après la connexion

Option 2 : Positionnement absolu

Appliquer le positionnement absolu au

récipient. Ensuite, positionnez l'enfant absolument en haut : 50 % et utilisez margin-top :-YYYpx, où YYY représente la moitié de la taille connue de l'enfant.

#theMainDiv {
  position: relative; /* Apply relative positioning to the div */
}

#tag1_outer {
  position: absolute;
  top: 50%;
  margin-top: -10px; /* Half the height of the child span */
}

Copier après la connexion

Référez-vous à l'article fourni sur la compréhension de l'alignement vertical pour plus de détails et des techniques supplémentaires .

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!

Article précédent：Pouvez-vous étirer verticalement du texte à l’aide de CSS sans l’agrandir ? Article suivant：Pourquoi mon élément \"Input\" n'hérite-t-il pas de la police du \"Body\" ?

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

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2747

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2861

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

2406

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...