Alinhar verticalmente o texto ao lado de uma imagem?

Por que não vai vertical-align: middlefuncionar? E ainda,vertical-align: top faz o trabalho.

span{
  vertical-align: middle;
}

<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>Doesn't work.</span>
</div>

Na verdade, neste caso, é bastante simples: aplique o alinhamento vertical à imagem. Como está tudo em uma linha, é realmente a imagem que você deseja alinhar, não o texto.

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://placehold.it/60x60">
  <span style="">Works.</span>
</div>

Testado em FF3.

Agora você pode usar o flexbox para esse tipo de layout.

.box {
   display: flex;
   align-items:center;
}

<div class="box">
    <img src="https://placehold.it/60x60">
    <span style="">Works.</span>
</div>

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 igual à do contêiner

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

Alinhamento vertical de linhas múltiplas: inferior

Posicione absolutamente uma div interna em relação ao seu contêiner

<div style="position:relative;width:30px;height:60px;">
  <div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>

Alinhamento vertical de linhas múltiplas: meio

<div style="display:table;width:30px;height:60px;">
  <div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>

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

Para que isso funcione corretamente, você precisará hackear um pouco o CSS. Felizmente, existe um bug do IE que funciona a nosso favor. Definindo top:50%no contêiner e top:-50%na div interna, você pode obter o mesmo resultado. Podemos combinar os dois usando outro recurso que o IE não suporta: seletores avançados de CSS.

<style type="text/css">
  #container {
    width: 30px;
    height: 60px;
    position: relative;
  }
  #wrapper > #container {
    display: table;
    position: static;
  }
  #container div {
    position: absolute;
    top: 50%;
  }
  #container div div {
    position: relative;
    top: -50%;
  }
  #container > div {
    display: table-cell;
    vertical-align: middle;
    position: static;
  }
</style>

<div id="wrapper">
  <div id="container">
    <div><div><p>Works in everything!</p></div></div>
  </div>
</div>

Altura variável do contêiner alinhamento vertical: meio

Esta solução requer um navegador um pouco mais moderno que as outras soluções, pois utiliza a transform: translateYpropriedade. ( http://caniuse.com/#feat=transforms2d )

A aplicação das 3 linhas de CSS a seguir em um elemento centralizará verticalmente em seu pai, independentemente da altura do elemento pai:

position: relative;
top: 50%;
transform: translateY(-50%);

Mude o seu divpara um contêiner flexível:

div { display:flex; }

Agora, existem dois métodos para centralizar os alinhamentos para todo o conteúdo:

Método 1:

div { align-items:center; }

DEMO

Método 2:

div * { margin-top:auto; margin-bottom:auto; }

DEMO

Experimente diferentes valores de largura e altura imge diferentes tamanhos de fonte no spane você verá que eles sempre permanecem no meio do contêiner.

Você deve aplicar vertical-align: middlea ambos os elementos para que ele seja centralizado perfeitamente.

<div>
  <img style="vertical-align:middle" src="http://lorempixel.com/60/60/">
  <span style="vertical-align:middle">Perfectly centered</span>
</div>

A resposta aceita centraliza o ícone em torno da metade da altura x do texto próximo a ele (conforme definido nas especificações do CSS ). O que pode ser bom o suficiente, mas pode parecer um pouco estranho, se o texto tiver ascendentes ou descendentes destacando-se na parte superior ou inferior:

À esquerda, o texto não está alinhado, à direita, como mostrado acima. Uma demonstração ao vivo pode ser encontrada neste artigo sobre alinhamento vertical .

Alguém falou sobre por que vertical-align: topfunciona no cenário? A imagem na pergunta é provavelmente mais alta que o texto e, portanto, define a borda superior da caixa de linha.vertical-align: topno elemento span, basta posicioná-lo na parte superior da caixa de linha.

A principal diferença de comportamento entre vertical-align: middlee topé que o primeiro move elementos em relação à linha de base da caixa (que é colocada sempre que necessário para cumprir todos os alinhamentos verticais e, portanto, parece bastante imprevisível ) e a segunda em relação aos limites externos da caixa de linha (que é mais tangível).

A técnica usada na resposta aceita funciona apenas para texto de linha única ( demo ), mas não para texto de várias linhas ( demo) ) - conforme observado lá.

Se alguém precisar centralizar verticalmente o texto com várias linhas em uma imagem, aqui estão algumas maneiras (Métodos 1 e 2 inspirados neste artigo de 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 violão 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 e no FF:

<div>
  <img style="width:auto; height:auto;vertical-align: middle;">
  <span>It does work on all browsers</span>
</div>

Porque você precisa definir line-heighta altura da div para que isso funcione

Basicamente, você terá que descer para CSS3.

-moz-box-align: center;
-webkit-box-align: center;

Para o registro, os "comandos" de alinhamento não devem funcionar em um SPAN, porque é uma tag em linha , não um nível de bloco marca no . Coisas como alinhamento, margem, preenchimento, etc. não funcionarão em uma tag in-line porque o objetivo da inline não é interromper o fluxo de texto.

O CSS divide as tags HTML em dois grupos: em linha e em nível de bloco. Pesquise "bloco css vs inline" e um ótimo artigo será exibido ...

http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

(Compreender os princípios básicos do CSS é a chave para que ele não seja tão irritante)

Use line-height:30pxpara a extensão para que o texto fique alinhado com a imagem:

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

Outra coisa que você pode fazer é definir o texto line-heightpara o tamanho das imagens dentro do <div>. Em seguida, defina as imagens paravertical-align: middle;

Essa é seriamente a maneira mais fácil.

Ainda não vi uma solução marginem nenhuma dessas respostas, então aqui está a minha solução para esse problema.

Esta solução só funciona se você souber a largura da sua imagem.

O HTML

<div>
    <img src="https://placehold.it/80x80">
    <span>This is my very long text what should align. This is my very long text what should align.</span>
</div>

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 de top. Ao aumentar / diminuir esse valor, a imagem pode ser alterada para a altura necessária.

Escreva essas propriedades de extensão

span{
    display:inline-block;
    vertical-align:middle;
}

Use display:inline-block;When you use vertical-alignproperty. Essas são propriedades associadas

Você pode definir a imagem como inline elementusando a displaypropriedade

<div>
  <img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60">
  <span style="vertical-align: middle; display: inline;">Works.</span>
</div>

Em um botão no jQuery mobile, por exemplo, você pode ajustá-lo um pouco aplicando este estilo à imagem:

.btn-image {
    vertical-align:middle;
    margin:0 0 3px 0;
}

Solução multilinha:

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

<div style="display:table;width:30px;height:160px;">
    <img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' />
    <div style="display:table-cell;height:30px;vertical-align:middle">
      Multiline text centered vertically
    </div>
</div>
<!-- note: img (height + 2x padding) must be equal to root div height -->

Funciona em todos os navegadores e ie9 +

Pode ser confuso, eu concordo. Tente utilizar os recursos da tabela. Eu uso esse truque simples de CSS para posicionar os modais no centro da página. Possui amplo suporte ao navegador:

<div class="table">
    <div class="cell">
        <img src="..." alt="..." />
        <span>It works now</span>
    </div>
</div>

e parte CSS:

.table { display: table; }
.cell { display: table-cell; vertical-align: middle; }

Observe que é necessário estilizar e ajustar o tamanho da imagem e do contêiner da tabela para que funcione conforme desejado. Aproveitar.

Primeiramente, o CSS embutido não é recomendado, ele realmente atrapalha o seu HTML.

Para alinhar imagem e amplitude, você pode simplesmente fazê-lo vertical-align:middle.

.align-middle {
  vertical-align: middle;
}

<div>
  <img class="align-middle" src="https://i.stack.imgur.com/ymxaR.png">
  <span class="align-middle">I'm in the middle of the image! thanks to CSS! hooray!</span>
</div>

Não sei por que ele não o renderiza no navegador de navegação, mas normalmente uso um trecho como esse ao tentar exibir um cabeçalho com uma imagem e um texto centralizado, espero que ajude!

https://output.jsbin.com/jeqorahupo

            <hgroup style="display:block; text-align:center;  vertical-align:middle;  margin:inherit auto; padding:inherit auto; max-height:inherit">

            <header style="background:url('http://lorempixel.com/30/30/') center center no-repeat; background-size:auto; display:inner-block; vertical-align:middle; position:relative; position:absolute; top:inherit; left:inherit; display: -webkit-box; display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-flex-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;">

            <image src="http://lorempixel.com/60/60/" title="Img title" style="opacity:0.35"></img>
                    http://lipsum.org</header>
                    </hgroup>

Você provavelmente quer isso:

<div>
   <img style="width:30px; height:30px;">
   <span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>

Como outros sugeriram, tente vertical-aligna imagem:

<div>
   <img style="width:30px; height:30px; vertical-align:middle;">
   <span>Didn't work.</span>
</div>

CSS não é chato. Você simplesmente não lê a documentação . ; P