Estou tentando obter um contêiner azul no meio do rosa, mas parece vertical-align: middle;
que não funciona nesse caso.
<div style="display: block; position: absolute; left: 50px; top: 50px;">
<div style="text-align: left; position: absolute;height: 56px;vertical-align: middle;background-color: pink;">
<div style="background-color: lightblue;">test</div>
</div>
</div>
Resultado:
Expectativa:
Por favor, sugira como posso conseguir isso.
html
css
vertical-alignment
absolute
Vladimirs
fonte
fonte
position: absolute
qualquer lugar?vertical-align: middle;
trabalhos comdisplay: inline-block
ou layout da tabelamargin-top: calc((56px - 16px) / 2)
, onde56px - parent height
,16px - element height/font-size
- jsFiddleRespostas:
Antes de tudo, observe que isso
vertical-align
é aplicável apenas às células da tabela e aos elementos no nível de linha.Existem duas maneiras de obter alinhamentos verticais que podem ou não atender às suas necessidades. No entanto, mostrarei dois métodos dos meus favoritos:
1. Usando
transform
etop
O ponto principal é que um valor percentual em
top
é relativo ao doheight
bloco que o contém; Enquanto um valor percentual emtransform
s é relativo ao tamanho da própria caixa (a caixa delimitadora).Se você tiver problemas de renderização de fonte (fonte embaçada), a correção será adicionada
perspective(1px)
àtransform
declaração para que ela se torne:Vale notar que o CSS
transform
é suportado no IE9 + .2. Usando
inline-block
elementos (pseudo-)Neste método, temos dois
inline-block
elementos irmãos que são alinhados verticalmente no meio porvertical-align: middle
declaração.Um deles tem um
height
dos100%
seus pais e o outro é o elemento desejado, que queremos alinhá-lo no meio.Por fim, devemos usar um dos métodos disponíveis para remover a lacuna entre os elementos em nível de linha .
fonte
valign
elemento do método deve serdisplay: block
transform: translateY(-50%);
Nunca vi isso antes, mas funciona perfeitamente. Poupança da vida real.usa isto :
consulte este link: https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/
fonte
height
propriedade deve ser definida (em px, em etc.) para que isso funcione.Use o flex blox em sua div posicionada de maneira distraída para centralizar seu conteúdo.
Veja o exemplo https://plnkr.co/edit/wJIX2NpbNhO34X68ZyoY?p=preview
fonte
Centralizar verticalmente e horizontalmente:
fonte
Você pode usar
display:table
/table-cell;
fonte
.b
falte, oposition: absolute;
que é importante para exibir outras coisas que não foram incluídas para manter o código mais claro. Eu sei que não faz sentido ter a célula de tabela absolutamente posicionada, mas talvez haja outra abordagem que permita reterposition: absolute;
as classes.a
e as.b
classes?Aqui está uma maneira simples de usar o objeto Top.
por exemplo: se o tamanho absoluto do elemento for 60px.
fonte
calc
é útil, embora isso deva sertop: calc(50% - 30px)
realmente centralizado.Uma solução simples adicional
HTML:
CSS:
fonte
Verifique esta resposta para um problema semelhante.
Esta é de longe a maneira mais fácil que encontrei.
https://stackoverflow.com/a/26079837/4593442
NOTA. Eu usei display: -webkit-flex; em vez de exibição: flex; para testar dentro do safari.
NOTA DE RODAPÉ. Sou apenas iniciante, compartilhando a ajuda de alguém claramente experiente.
fonte
Você pode fazer isso usando
display:table;
div pai edisplay: table-cell; vertical-align: middle;
filho divfonte