Alinhar verticalmente o texto ao lado de uma imagem?

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:

Alinhamento vertical de uma linha: meio

Essa é fácil: defina a altura da linha do elemento de texto como igual à do contêiner

 
  Doesn't work.  

Alinhamento vertical de várias linhas: inferior

Absolutamente posicione uma div interna em relação ao seu contêiner

 
 
This is positioned on the bottom
  

Múltiplas linhas alinhadas verticalmente: meio

 
 
This is positioned in the middle
  

Se você deve suportar versões antigas do IE <= 7

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!
 
  

Altura variável do container vertical-align: middle

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 )

Método 1: tabelas CSS ( FIDDLE ) (IE8 + ( caniuse ))

CSS:

 div { display: table; } span { vertical-align: middle; display: table-cell; } 

Método # 2: Pseudo elemento no contêiner ( FIDDLE ) (IE8 +)

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

Método # 3: Flexbox ( FIDDLE ) ( caniuse )

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.

O HTML

 
  This is my very long text what should align. This is my very long text what should align.  

O CSS

 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:

http://jsfiddle.net/zH58L/6/

 
  
 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