Por que não vai vertical-align: middle
funcionar? 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>
Por que não vai vertical-align: middle
funcionar? 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>
Respostas:
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>
span
tamanho da fonte. Veja minha resposta .
width:16px;height:16px
), você pode ver a imagem será muito baixa ...
Aqui estão algumas técnicas simples para alinhamento vertical:
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>
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>
<div style="display:table;width:30px;height:60px;">
<div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>
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>
Esta solução requer um navegador um pouco mais moderno que as outras soluções, pois utiliza a transform: translateY
propriedade. ( 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%);
display:table
e display:table-cell
funcionam 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-.
display:table
possui algumas limitações em vários navegadores (no IE11 max-height
nã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.
Mude o seu div
para 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; }
Método 2:
div * { margin-top:auto; margin-bottom:auto; }
Experimente diferentes valores de largura e altura img
e diferentes tamanhos de fonte no span
e você verá que eles sempre permanecem no meio do contêiner.
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.
Você deve aplicar vertical-align: middle
a 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: top
funciona 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: top
no elemento span, basta posicioná-lo na parte superior da caixa de linha.
A principal diferença de comportamento entre vertical-align: middle
e 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 )
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 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>
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)
text-align
e vertical-align
(com a excepção da sua aplicação em td
elementos para fins legadas) são especificamente destinados para inline
e inline-block
elementos ( span
, img
, etc.).
Use line-height:30px
para 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-height
para 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 margin
em 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.
<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>
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.
Você pode definir a imagem como inline element
usando a display
propriedade
<div>
<img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60">
<span style="vertical-align: middle; display: inline;">Works.</span>
</div>
Solução multilinha:
<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-align
a 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
vertical-align