"Se um trabalhador quiser fazer bem o seu trabalho, ele deve primeiro afiar suas ferramentas." - Confúcio, "Os Analectos de Confúcio. Lu Linggong"
Primeira página > Programação > Como alinhar verticalmente um interior de um?

Como alinhar verticalmente um interior de um?

Publicado em 2024-11-09
Navegar:100

How to Vertically Align a  Inside a ?

Alinhando um verticalmente dentro de um

Considere a seguinte situação: você tem um aninhado dentro de um , como visto neste código:

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

Por padrão, o será alinhado ao canto inferior esquerdo do

. Para centralizar o dentro do
verticalmente, considere as seguintes abordagens:

Opção 1: Manipulação da altura da linha

Defina a altura da linha do child seja igual à altura do

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

#tag1_outer {
  line-height: 20px;
}

Opção 2: posicionamento absoluto

Aplique o posicionamento absoluto ao contêiner

. Em seguida, posicione o filho absolutamente em top:50% e use margin-top:-YYYpx, onde YYY representa metade da altura conhecida do filho.
#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 */
}

Consulte o artigo fornecido sobre como entender o alinhamento vertical para obter mais detalhes e técnicas adicionais.

Tutorial mais recente Mais>

Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.

Copyright© 2022 湘ICP备2022001581号-3