"Si un ouvrier veut bien faire son travail, il doit d'abord affûter ses outils." - Confucius, "Les Entretiens de Confucius. Lu Linggong"
Outils en ligne
Tutoriel logiciel
Navigation sur les sites
La programmation
Page de garde > La programmation > Comment aligner verticalement un intérieur d'un ?

Comment aligner verticalement un intérieur d'un ?

Publié le 2024-11-09
Parcourir:798

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 verticalement le dans le
, envisagez les approches suivantes :

Option 1 : Manipulation de la hauteur de ligne

Définissez la hauteur de ligne du child doit ê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 conteneur

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

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

Dernier tutoriel Plus>
ClassificationPlus>
Apprendre le japonais Apprendre le coréen Apprendre le chinois Apprendre une langue étrangère Jeu Problème commun Périphériques technologiques IA Tutoriel logiciel La programmation Article

Étudier le chinois

OutilPlus>
Décodage d'images en base64
Pinyin chinois
Encodage Unicode
Compression de chiffrement d'obscurcissement JS
Outil de chiffrement hexadécimal d'URL
Outil de conversion d'encodage UTF-8
Outils d'encodage et de décodage Ascii en ligne
Outil de cryptage MD5
Outil de cryptage et de décryptage en ligne de texte de hachage/hachage
Cryptage SHA en ligne

Clause de non-responsabilité: Toutes les ressources fournies proviennent en partie d'Internet. En cas de violation de vos droits d'auteur ou d'autres droits et intérêts, veuillez expliquer les raisons détaillées et fournir une preuve du droit d'auteur ou des droits et intérêts, puis l'envoyer à l'adresse e-mail : [email protected]. Nous nous en occuperons pour vous dans les plus brefs délais.

Copyright© 2022 湘ICP备2022001581号-3