Maison > Article > interface Web > Comment aligner verticalement un intérieur d'un ?

Comment aligner verticalement un intérieur d'un ?

Linda Hamiltonoriginal: 2024-10-28 02:22:01521parcourir

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>

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;
}

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 */
}

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!

for default this position margin

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

Article précédent：Pouvez-vous étirer verticalement du texte à l’aide de CSS sans l’agrandir ?Article suivant：Pouvez-vous étirer verticalement du texte à l’aide de CSS sans l’agrandir ?

Articles Liés

Voir plus