Alinhar verticalmente o texto ao lado de uma imagem?


1967

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>


12
Aqui está um artigo interessante: Compreensãovertical-align
Fedro

Respostas:


2253

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>


188
"Como está tudo em uma linha, é realmente a imagem que você deseja alinhar, não o texto". - Não, a imagem está boa onde está. Queremos o texto alinhado. Não é a imagem. - Entendi que isso funciona (em algumas circunstâncias, por exemplo: quando você não está usando "float: left" na imagem ...), mas é bizarro e pouco intuitivo que mover fisicamente o texto para o meio vertical você teria que aplicar um atributo à imagem ao lado dela.
precisa saber é o seguinte

35
@ BrainSlug83 Certamente não é bizarro, mas posso ver como os novatos podem ser enganados por isso. Por padrão, uma imagem será colocada na linha de base do texto. Tudo o que você está fazendo é mover para onde a imagem está anexada em relação ao texto. Quanto ao uso de float: left, você deve fazer isso no bloco que contém a imagem e o texto ou no próprio texto.
jamesrom

14
@ BrainSlugs83 Concordou que pode ser visto como contra-intuitivo. É preciso uma mudança mental, porque, de acordo com o CSS, o que você precisa fazer é centralizar a imagem no texto. Não é o texto da imagem.
precisa saber é o seguinte

6
Não funciona se você aumentar o spantamanho da fonte. Veja minha resposta .
Mori

2
Mas se você definir o tamanho da imagem para um menor (como width:16px;height:16px), você pode ver a imagem será muito baixa ...
Matthieu Charbonnier

340

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%);

15
Os seletores CSS display:tablee display:table-cellfuncionam muito bem, exceto, é claro, no IE7 e abaixo. Depois de arrancar o cabelo por várias horas, decidi que realmente não precisava lidar com ninguém que ainda usasse o IE7-.
precisa

2
display:tablepossui algumas limitações em vários navegadores (no IE11 max-heightnão funciona se o elemento estiver dentro de uma célula da tabela), portanto, em alguns casos extremos, não é uma boa ideia alinhar verticalmente usando células da tabela.
jahu

97

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.


Para centralizar o texto ao lado ou entre as imagens (horizontalmente na página), você também deve adicionar justify-content: center;e, para espaçamento (sem usar tags <br/>), você também pode inserir a padding: 1em;. Ótima atualização para nós, desenvolvedores modernos de navegadores.
CSS

Isso funcionou bem. Eu tentei todas e todas as outras respostas e, enquanto elas trabalhavam até certo ponto, não funcionou para mim. Eu tinha cerca de três linhas de texto para alinhar, e essa resposta funcionou perfeitamente. Obrigado @Mori
semaj0

87

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:

comparação de ícones centralizados

À 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).


1
Notei os trabalhos superiores e inferiores, mas não o meio. Basicamente, o "meio" não é definido como meio caminho entre o topo e o fundo. Significa mais "quando é mais alto que o texto, se destaca igualmente". E aqui você não precisa de alinhamento vertical: meio do texto, apenas a imagem.
Curtis

61

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

3
Os métodos funcionam bem se a imagem for maior (em altura) que o texto. Mas, se a imagem for menor, então tudo mas o último infelizmente falhar
Thomas

28

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>

19

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


2
Tentei definir a altura da linha como 30px e ainda não funciona.
sam

12

Basicamente, você terá que descer para CSS3.

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

11

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)


2
text-aligne vertical-align(com a excepção da sua aplicação em tdelementos para fins legadas) são especificamente destinados para inlinee inline-blockelementos ( span, img, etc.).
precisa

11

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>

11

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.


3
Observe que isso não funcionará corretamente se o seu conteúdo estiver espalhado por várias linhas.
Ahmad Alfy 6/11/12

e então por que não apenas a altura da linha: 100%?
Jean Paul AKA el_vete

8

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

1
Aqui está a solução exata. Também funciona para textos de várias linhas ... Acima não são adequados para várias linhas.
efirat 2/09/16

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


Não ajuda em situações em que o tamanho da imagem é desconhecido ou dinâmico.
Dan

6

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


6

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>


3

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

2

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 +


2

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.


0

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>


2
Há muitas boas razões para usar CSS embutido. Reaja: CSS em JS, por exemplo.
jlyonsmith

0

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>

-4

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


6
E se a altura da imagem for dinâmica? Eu estou ferrado :( PS, só porque existe documentação para CSS não torná-lo chato ou intuitiva.
sam

Você quer dizer irritante e intuitivo? Você não especificou se a altura da imagem é dinâmica na sua pergunta, então eu assumi que a altura fixa seria o que você usaria.
Strager 28/01/09

2
Eu estou com Sam neste. Eu assumi que os itens deviam estar centralizados com a altura da imagem. Acho que todos nós poderíamos nos acalmar um pouco.
Michael Haren
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.