Por que não vertical-align: middle
trabalho vertical-align: middle
? E ainda, vertical-align: top
funciona.
Doesn't work.
Na verdade, neste caso, é bastante simples: aplicar o alinhamento vertical à imagem. Já que é tudo em uma linha, é realmente a imagem que você quer alinhar, não o texto.
Works.
Aqui estão algumas técnicas simples para alinhamento vertical:
Essa é fácil: defina a altura da linha do elemento de texto como igual à do contêiner
Doesn't work.
Absolutamente posicione uma div interna em relação ao seu contêiner
This is positioned on the bottom
This is positioned in the middle
Para que isso funcione corretamente, você terá que hackear o CSS um pouco. Felizmente, há um bug do IE que funciona a nosso favor. Parte top:50%
ajuste top:50%
no recipiente e na top:-50%
no div interno, você pode conseguir o mesmo resultado. Podemos combinar os dois usando outro recurso que o IE não suporta: seletores CSS avançados.
Works in everything!
Essa solução requer um navegador um pouco mais moderno que as outras soluções, pois faz uso da propriedade transform: translateY
. ( http://caniuse.com/#feat=transforms2d )
Aplicar as três linhas de CSS a seguir a um elemento centralizará verticalmente dentro de seu pai, independentemente da altura do elemento pai:
position: relative; top: 50%; transform: translateY(-50%);
Altere seu div
em um contêiner flexível:
div {display:flex;}
Agora, existem dois methods para centralizar os alinhamentos de todo o conteúdo:
Método 1:
div {align-items:center;}
DEMO
Método 2:
div * {margin-top:auto; margin-bottom:auto;}
DEMO
Tente diferentes valores de largura e altura no img
e valores de tamanho de fonte diferentes no span
e você verá que eles sempre permanecem no meio do contêiner.
Você tem que aplicar vertical-align: middle
para ambos os elementos para que seja centralizado perfeitamente.
Perfectly centered
A técnica usada na resposta aceita funciona somente para texto de uma só linha ( demo ), mas não para texto de várias linhas ( demo ) – conforme mencionado.
Se alguém precisar centralizar verticalmente o texto multilinha em uma imagem, aqui estão algumas maneiras (os methods 1 e 2 são inspirados por este artigo do CSS-Tricks )
CSS:
div { display: table; } span { vertical-align: middle; display: table-cell; }
CSS:
div { height: 200px; /* height of image */ } div:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; /* Adjusts for spacing */ } img { position: absolute; } span { display: inline-block; vertical-align: middle; margin-left: 200px; /* width of image */ }
CSS (O violino acima contém prefixos de fornecedores):
div { display: flex; align-items: center; } img { min-width: 200px; /* width of image */ }
Este código funciona no IE, assim como no FF:
It does work on all browsers
Porque você tem que definir a line-height
da line-height
para a altura da div para que isso funcione
Basicamente, você terá que descer para o CSS3.
-moz-box-align: center; -webkit-box-align: center;
Para o registro, “comandos” de alinhamento não devem funcionar em um SPAN, porque é uma tag in-line , não uma tag de nível de bloco . Coisas como alinhamento, margem, preenchimento, etc. não funcionarão em uma tag in-line porque o ponto de inline não é interromper o stream de texto.
O CSS divide as tags HTML em dois grupos: in-line e block-level. Pesquisar “css block vs inline” e um ótimo artigo mostra https://stackoverflow.com/questions/489340/vertically-align-text-next-to-an-image/…
http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
(Entender os princípios básicos do CSS é a chave para não ser tão irritante)
Outra coisa que você pode fazer é definir a line-height
da line-height
do texto para o tamanho das imagens dentro do
. Em seguida, defina as imagens para vertical-align: middle;
Essa é seriamente a maneira mais fácil.
Use line-height:30px
para o intervalo, para que o texto fique alinhado com a imagem:
Doesn't work.
Ainda não vi uma solução com margin
em nenhuma dessas respostas, então aqui está minha solução para esse problema.
Esta solução só funciona se você souber a largura da sua imagem.
This is my very long text what should align. This is my very long text what should align.
div { overflow:hidden; } img { width:80px margin-right:20px; display:inline-block; vertical-align:middle; } span { width:100%; margin-right:-100px; padding-right:100px; display:inline-block; vertical-align:middle; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }
background:url(../images/red_bullet.jpg) left 3px no-repeat;
Eu geralmente uso 3px no lugar do top
. Aumentando / diminuindo esse valor, a imagem pode ser alterada para a altura desejada.
Escreva estas propriedades de span
span{ display:inline-block; vertical-align:middle; }
Use display:inline-block;
Quando você usa vertical-align
propriedade vertical-align
são propriedades associadas
Em um botão no jQuery mobile, por exemplo, você pode ajustar um pouco aplicando esse estilo à imagem:
.btn-image { vertical-align:middle; margin:0 0 3px 0; }
Você pode definir a imagem como inline element
usando a propriedade display
Works.
Solução multilinha:
Multiline text centered vertically
Funciona em todos os browers e ie9 +
Pode ser confuso, eu concordo. Tente utilizar os resources da tabela. Eu uso este truque CSS simples para posicionar os modais no centro da página da web. Tem grande suporte ao navegador:
It works now
e parte de CSS:
.table { display: table; } .cell { display: table-cell; vertical-align: middle; }
Observe que você precisa estilizar e ajustar o tamanho da imagem e do contêiner da tabela para que ela funcione como você deseja. Apreciar.
Em primeiro lugar, o CSS in-line não é recomendado, ele realmente atrapalha seu HTML.
Para alinhar imagem e amplitude, você pode simplesmente vertical-align:middle
.
.align-middle { vertical-align: middle; }
I'm in the middle of the image! thanks to CSS! hooray!
Você provavelmente quer isso:
Didn't work.
Como outros sugeriram, tente vertical-align
na imagem:
Didn't work.
CSS não é chato. Você simplesmente não lê a documentação . ; P