Verticalmente texto alinhar ao lado de uma imagem?

StackOverflow https://stackoverflow.com/questions/489340

  •  20-08-2019
  •  | 
  •  

Pergunta

Por que não vai funcionar vertical-align: middle? E, no entanto, vertical-align: top faz trabalho. 

span{
  vertical-align: middle;
}
<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>Doesn't work.</span>
</div>

Foi útil?

Solução

Na verdade, neste caso, é muito simples: aplicar a alinhar vertical para a imagem. Desde que é tudo em uma linha, é realmente a imagem que deseja alinhados, 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 flexbox para este tipo de layout. 

.box {
   display: flex;
   align-items:center;
}
<div class="box">
    <img src="https://placehold.it/60x60">
    <span style="">Works.</span>
</div>

Outras dicas

Aqui estão algumas técnicas simples para vertical-align:

Uma linha vertical-align: middle

Esta é fácil: Definir o line-height do elemento de texto para igualar a do recipiente 

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

-Várias linhas vertical-align: inferior

Absolutamente posicionar um div interna em relação ao seu recipiente 

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

-Várias linhas vertical-align: middle 

<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ê tem de suportar versões antigas do IE <= 7

A fim de chegar a este trabalho corretamente através da placa, você vai ter que cortar o CSS um pouco. Felizmente, há um bug IE que funciona em nosso favor. Definir top:50% no recipiente e top:-50% sobre a div interna, você pode conseguir o mesmo resultado. Nós podemos combinar os dois usando outra característica IE não suportar:. Seletores CSS avançados 

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

Variável altura do recipiente vertical-align: meio

Esta solução requer um navegador ligeiramente mais moderno do que as outras soluções, como faz uso da propriedade transform: translateY. ( http://caniuse.com/#feat=transforms2d )

Aplicando os seguintes 3 linhas de CSS para um elemento irá verticalmente centrá-la dentro da sua mãe, independentemente da altura do elemento pai: 

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

Mude o seu div em um recipiente flexível: 

div {display:flex;}


Agora, existem dois métodos para o centro de alinhamentos para todo o conteúdo:

Método 1: 

div {align-items:center;}

DEMONSTRA

Método 2: 

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

DEMONSTRA

Tente largura e altura diferentes valores na img e valores tamanho de fonte diferente na span e você verá que eles permanecem sempre no meio do recipiente.

Você tem que aplicar vertical-align: middle a ambos os elementos para tê-lo sido centrado 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 faz o centro de ícone cerca de metade da altura-x do texto ao lado dele (conforme definido no CSS specs ). O que pode ser bom o suficiente, mas pode olhar um pouco fora, se o texto tem ascendentes ou descendentes destacando-se apenas na parte superior ou inferior:

centrada comparação ícone

À esquerda, o texto não é alinhado, à direita, é como mostrado acima. Uma demonstração ao vivo pode ser encontrado neste artigo sobre vertical-align .

Alguém já falou sobre isso vertical-align: top funciona no cenário? A imagem em questão é provavelmente mais alto do que o texto e, portanto, define a borda superior da caixa de linha. vertical-align: top sobre o elemento span então apenas posiciona-lo no topo da caixa de linha.

A principal diferença no comportamento entre vertical-align: middle e top é que os primeiros movimentos elementos relativos à linha de base da caixa (o qual é colocado, sempre que necessário para cumprir todos os alinhamentos verticais e, assim, parece bastante imprevisível ) e o segundo relativo dos limites exteriores da caixa de linha (que é mais concreta).

A técnica utilizada na resposta aceita só funciona para texto single-alinhados ( demonstração ) , mas não multi-linha de texto ( demonstração ) -. como observado há

Se alguém precisa de texto alinhado-multi verticalmente centro para uma imagem, aqui estão algumas maneiras (Métodos 1 e 2 inspirados pelo este artigo CSS-truques )

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

CSS: 

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

Método # 2: elemento Pseudo no recipiente ( 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 ) (< a href = "http://caniuse.com/flexbox" rel = "noreferrer"> caniuse )

CSS (O violino acima contém prefixos vendor): 

div {   
    display: flex; 
    align-items: center;    
}
img {
    min-width: 200px; /* width of image */
}

Este código funciona no IE, bem como FF: 

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

Porque você tem que definir o line-height para a altura da div para que isso funcione

Basicamente, você vai ter que começar a CSS3. 

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

Para o registro, o alinhamento "comandos" não deve trabalhar em um SPAN, porque é uma tag em linha , e não uma tag em nível de bloco . Coisas como alinhamento, margem, estofamento, etc não vai trabalhar em uma tag em linha porque o ponto de in-line não é interromper o fluxo de texto.

CSS divide HTML marcas em dois grupos: em linha e em nível de bloco. Pesquisar "bloco css vs inline" e um ótimo artigo aparece ...

http://www.webdesignfromscratch.com/html-css / css-bloco-e-inline /

(princípios CSS núcleo entendimento é a chave para não ser tão irritante)

Use line-height:30px para a extensão para que o texto é alinhar 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 line-height do texto para o tamanho das imagens dentro do <div>. Em seguida, defina as imagens para vertical-align: middle;

Isso é seriamente a maneira mais fácil.

não vi uma solução com margin em qualquer uma dessas respostas ainda, então aqui está a minha solução para este problema.

Esta solução só funciona se você souber a largura da 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 alterado para a altura necessária.

Escrever estas propriedades extensão 

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

Use display:inline-block; Quando você usa property.Those vertical-align são propriedades assosiated

Você pode definir imagem como inline element usando a propriedade display 

<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 móvel, por exemplo, você pode ajustá-lo um pouco, aplicando esse estilo para a imagem: 

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

solução de múltiplas linhas:

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

Obras em todos os browers e IE9 +

Pode ser confuso, eu concordo. Tente utilizar recursos de tabela. Eu uso este truque CSS simples de modais posição no centro da página. Ele tem grande suporte ao navegador: 

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

e CSS parte: 

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

Note que você tem que estilo e ajustar o tamanho da imagem e mesa de recipiente para que ele funcione como você deseja. Desfrute.

Em primeiro lugar CSS inline não é recomendada a todos, realmente atrapalhar o seu HTML.

Para alinhar imagem e espaço, você pode simplesmente fazer 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>

Você provavelmente quer isto: 

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

Como outros têm sugerido, tente vertical-align na imagem: 

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

CSS não é irritante. Você simplesmente não ler a documentação . ; P

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top