Como alinhar verticalmente uma imagem dentro de uma div

1456

Como você pode alinhar uma imagem dentro de uma contenção div?

Exemplo

No meu exemplo, preciso centralizar verticalmente o <img>no <div>com class ="frame":

<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.png" />
</div>

.frameA altura da imagem é fixa e a altura da imagem é desconhecida. Posso adicionar novos elementos .framese essa for a única solução. Estou tentando fazer isso no Internet Explorer 7 e posterior, WebKit, Gecko.

Veja o jsfiddle aqui .

.frame {
    height: 25px;      /* Equals maximum image height */
    line-height: 25px;
    width: 160px;
    border: 1px solid red;

    text-align: center;
    margin: 1em 0;
}
img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=15 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=13 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=11 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=9 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=7 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=5 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=3 />
 </div>

Expandir snippet

css image vertical-alignment Arnaud Le Blanc
fonte

3

Olá, desculpe, mas não concordo em usar um ajudante aqui, sendo a solução mais valorizada. Mas não é o único caminho. Outros são os mesmos suportados pelos navegadores. Eu ofereço uma solução aqui no stackoverflow.com/a/43308414/7733724 e no W3C.org sobre informações. Você pode verificar. Cheers

Sam

O artigo Reading Centering Things no W3C será útil: w3.org/Style/Examples/007/center.en.html

QMaster

Guia perfeito para alinhar css-tricks.com/centering-css-complete-guide

Michael Yurin

2128

A única maneira (e a melhor entre navegadores) que conheço é usar um inline-blockauxiliar com height: 100%e vertical-align: middlenos dois elementos.

Portanto, existe uma solução: http://jsfiddle.net/kizu/4RPFa/4570/

Mostrar snippet de código

.frame {
    height: 25px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    white-space: nowrap; /* This is required unless you put the helper span closely near the img */

    text-align: center;
    margin: 1em 0;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=17px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=15px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=13px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=11px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=9px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=7px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=5px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=3px />
</div>

Expandir snippet

Ou, se você não deseja ter um elemento extra nos navegadores modernos e não se importa em usar expressões do Internet Explorer, pode usar um pseudoelemento e adicioná-lo ao Internet Explorer usando uma Expressão conveniente, que é executada apenas uma vez por elemento , para que não haja problemas de desempenho:

A solução com :beforee expression()para o Internet Explorer: http://jsfiddle.net/kizu/4RPFa/4571/

Mostrar snippet de código

.frame {
    height: 25px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    white-space: nowrap;

    text-align: center;
    margin: 1em 0;
}

.frame:before,
.frame_before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

/* Move this to conditional comments */
.frame {
    list-style:none;
    behavior: expression(
        function(t){
            t.insertAdjacentHTML('afterBegin','<span class="frame_before"></span>');
            t.runtimeStyle.behavior = 'none';
        }(this)
    );
}

<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=250px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=25px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=23px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=21px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=19px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=17px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=15px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=13px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=11px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=9px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=7px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=5px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=3px /></div>

Expandir snippet

Como funciona:

Quando você tem dois inline-blockelementos próximos um do outro, pode alinhar um ao outro, para vertical-align: middleobter algo assim:
Quando você tem um bloco com altura fixa (em px, emou outra unidade absoluta), você pode definir a altura de blocos internos em %.
Portanto, adicionar um inline-blockcom height: 100%um bloco de altura fixa alinharia outro inline-blockelemento nele ( <img/>no seu caso) verticalmente perto dele.

kizu
fonte

2

Você pode ver por si mesmo: jsfiddle.net/kizu/Pw9NL - somente caixas em linha não geram uma caixa, mas todos os outros casos funcionam bem.

kizu 6/09/11

3

Resposta muito boa. Eu estava lutando com os espaços entre os elementos do bloco embutido, ou seja, entre .framee .frame:before. Uma solução proposta aqui é adicionar margin-left: -4pxa .frame. Espero que isto ajude.

Mick

111

PRESTE ATENÇÃO que: <img src=""/>NÃO está dentro do <span></span>auxiliar que foi adicionado. Está lá fora. Eu quase puxei cada mecha do meu cabelo por não perceber isso.

ryan

50

Parece que você também precisa adicionar "espaço em branco: nowrap;" para o quadro ou você terá um problema se houver uma quebra de linha entre a imagem e a extensão do auxiliar. Levei uma hora porque essa solução não estava funcionando para mim.

Juminoz

2

No meu caso, minha imagem tinha altura e largura máx. Definidas como 100% para que a imagem dimensionasse o contêiner e esse método não funcionou. Minha solução foi alterar esses valores para 90% (o que, no meu caso, foi bom; em outra situação, pode ser necessário dimensionar o contêiner de acordo) e também adicionar um auxiliar ao outro lado da imagem para que o preenchimento permaneça uniforme. ambos os lados.

Eric Dubé

513

Isso pode ser útil:

div {
    position: relative;
    width: 200px;
    height: 200px;
}
img {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}
.image {
    min-height: 50px
}

Tahir Yasin
fonte

74

Se você também deseja alinhar horizontalmente a imagem, adicione à esquerda: 0; direita: 0; para img

jameskind 02/02

este não está funcionando no IE10? Eu meio que usando este em todo o lugar

Max Yari

Também funciona (para mim) com o recipiente div tendoposition:fixed;

PJ Brunet

1

Solução mais fácil e mais limpa, obrigado!

KDT

Obrigado! Trabalhou para mim !!

Alexander Malygin

486

A solução de matejkramny é um bom começo, mas imagens grandes têm uma proporção errada.

Aqui está o meu garfo:

Demo: https://jsbin.com/lidebapomi/edit?html,css,output

pré-visualização

HTML:

<div class="frame">
  <img src="foo"/>
</div>

CSS:

.frame {
    height: 160px; /* Can be anything */
    width: 160px; /* Can be anything */
    position: relative;
}
img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

jomo
fonte

Alguma maneira de adaptar isso para que você possa ampliar a imagem de grandes dimensões, digamos 2x, e ela ainda permanecerá centralizada na horizontal e na vertical?

Justin

Se queremos fazê-lo funcionar para alinhamento vertical inferior, em vez de médio, que códigos devem ser modificados?

bobo

1

@bobo basta remover o top: 0;. Isso resulta em apenas bottom: 0;ser aplicado verticalmente.

Jomo

A melhor resposta!

user315338 11/02

278

Uma solução de três linhas:

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

Isso se aplica a qualquer coisa.

A partir daqui .

Jorge Orpinel
fonte

Prefixos: -ms- ou -webkit- (antes da transformação). w3schools.com/cssref/css3_pr_transform.asp

Jorge Orpinel

3

Prefixos para o IE9, mas não funcionam no IE8 e inferior: caniuse.com/#search=transform Mas minha opinião: não me importo com o IE8

Reign

Ninguém percebeu o que acontece quando o filho a ser centralizado é mais alto que a tela do dispositivo e o pai é o primeiro filho no DOM ...?

tao

3

Bom quando você não pode usar position: absolute;porque precisa de uma largura fluida.

plong0

2

Melhor solução até agora, ainda melhor que o flexbox, com suporte para a maioria dos navegadores modernos e antigos. Upvote this please

albanx

141

Uma solução CSS pura :

.frame {
  margin: 1em 0;
  height: 35px;
  width: 160px;
  border: 1px solid red;
  position: relative;
}

img {
  max-height: 25px;
  max-width: 160px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: #3A6F9A;
}

<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=15 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=13 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=11 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=9 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=7 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=5 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=3 />
</div>

Expandir snippet

Coisas importantes

// position: relative; - in .frame holds the absolute element within the frame
// top: 0; bottom: 0; left: 0; right: 0; - this is key for centering a component
// margin: auto; - centers the image horizontally & vertically

Matej
fonte

Por favor, deixe-me encaminhá-lo para um guia aqui que funciona até mesmo para IE5 (deduzindo-se o que eu li até agora no post) webmasterworld.com/css/3350566.htm

Matej

Essa solução é um bom começo, mas as imagens grandes são redimensionadas com uma proporção incorreta . Por favor, veja minha resposta.

jomo

@ HansWürstchen sim, mas o ponto é centralizar, se o tamanho é grande demais é a escolha do design. Adicionando mais css = mais desordem :)

Matej

1

@matejkramny não fica muito grande. se a imagem for grande demais, ela terá uma proporção errada. isso significa que é esticada em altura e não parece adequada.

jomo

✔ Uau, isso funciona com imagens transbordantes (maiores que o invólucro), a resposta aceita não.

Cedric Reichenbach

120

Para uma solução mais moderna, e se não houver necessidade de oferecer suporte a navegadores herdados, faça o seguinte:

.frame {
    display: flex;
    /**
    Uncomment 'justify-content' below to center horizontally.
    ✪ Read below for a better way to center vertically and horizontally.
    **/

    /* justify-content: center; */
    align-items: center;
}

img {
    height: auto;

    /**
    ✪ To center this image both vertically and horizontally,
    in the .frame rule above comment the 'justify-content'
    and 'align-items' declarations,
    then  uncomment 'margin: auto;' below.
    **/

    /* margin: auto; */
}

/* Styling stuff not needed for demo */
.frame {
    max-width: 900px;
    height: 200px;
    margin: auto;
    background: #222;
}
p {
    max-width: 900px;
    margin: 20px auto 0;
}
img {
    width: 150px;
}

<div class="frame">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9988/hand-pointing.png">
</div>

Expandir snippet

Aqui está uma caneta: http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e

Ricardo Zea
fonte

3

Isto é especialmente útil se a altura do recipiente não está definido

Dave Barnett

ou align-selfpara itens individuais

Michael

O problema align-selfé que os itens flex aumentam a altura do contêiner pai.

Ricardo Zea

101

Dessa forma, você pode centralizar uma imagem verticalmente ( demo ):

div{
  height: 150px; // Internet Explorer 7 fix
  line-height: 150px;
}
img{
  vertical-align: middle;
  margin-bottom: 0.25em;
}

Peter Mortensen
fonte

4

Estranhamente, não consegui obter a resposta aceita para trabalhar na minha situação (eu também estava cortando a imagem com estouro: oculto). Isso funcionou perfeitamente, no entanto.

Luca Spiller

3

Eu só testei isso no Chrome, mas a altura da linha parece ser a chave. Eu coloquei o atributo vertical-align na div, e não no img, pois meu img está dentro de uma âncora (<a/>).

Todd Price

1

Sim, muito mais simples que a solução aceita e funciona lindamente. Eu também encontrei esta solução no jsfiddle.

vdboor

1

Se você sabe que alturas para atender, isso funciona muito bem

KrekkieD

Da minha experiência, esta solução funciona apenas font-size: 0para div. Para contêineres muito grandes, você pode perdê-lo, mas se o seu divé 100px e o img é 80px, será alguns pixels menor.

alTus

38

Além disso, você pode usar o Flexbox para obter o resultado correto:

.parent {
  align-items: center; /* For vertical align */
  background: red;
  display: flex;
  height: 250px;
  /* justify-content: center; <- for horizontal align */
  width: 250px;
}

<div class="parent">
  <img class="child" src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" />
</div>

Expandir snippet

torniquete
fonte

28

Existe uma solução super fácil com o flexbox!

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

BBlackwo
fonte

5

Sim, mas você mal consegue vê-lo em todas as respostas. Eu estava tentando destacá-lo de forma simples e clara, pois é uma solução muito mais fácil do que todas as outras respostas.

precisa saber é o seguinte

Esta é a melhor resposta que também funcionou para mim. Mas no meu caso no quadro "inline-flex" funcionou melhor para mim. e para a imagem dentro dela eu adicionei: "vertical-align: middle".

Sophie Cooperman #

22

Você pode tentar definir o CSS do PI como display: table-cell; vertical-align: middle;

Yeodave
fonte

Eu já vi vários métodos, mas este era novo (mesmo em 2013) para mim.

Mike Ebert #

Melhor do que colocar a imagem dentro de uma mesa apenas para centralizá-la.

Jonats

3

exibir: table-cell nem sempre o tamanho corretamente se você quer a largura para ser 100%

Redtopia

1

O que é " PI"?

Peter Mortensen

18

Você pode tentar o código abaixo:

.frame{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.png" />
</div>

Expandir snippet

Santosh Khalse
fonte

14

Solução de imagem de fundo

Eu removi o elemento image completamente e o defini como plano de fundo da div com uma classe de .frame

http://jsfiddle.net/URVKa/2/

Isso pelo menos funciona bem no Internet Explorer 8, Firefox 6 e Chrome 13.

Eu verifiquei, e esta solução não funcionará para reduzir imagens maiores que 25 pixels de altura. Existe uma propriedade chamadabackground-size que define o tamanho do elemento, mas é o CSS 3 que entra em conflito com os requisitos do Internet Explorer 7.

Aconselho você a refazer as prioridades e o design do navegador para obter os melhores navegadores disponíveis ou obter algum código do servidor para redimensionar as imagens, se você quiser usar esta solução.

Benjamin Udink ten Cate
fonte

Solução muito boa, no entanto, espero que algumas imagens sejam maiores que o contêiner e, neste caso, planejei usar altura máxima / largura máxima nelas. Alguma maneira de fazer isso com imagens de fundo?

Arnaud Le Blanc

este não é um "elemento .frame" é um 'div com uma classe de .frame'

JGallardo

Se a altura da imagem não exceder a altura do quadro div, esta é a melhor e mais simples solução ...

efirat

13

Imagine que você tem

<div class="wrap">
    <img src="#">
</div>

E css:

.wrap {
    display: flex;
}
.wrap img {
    object-fit: contain;
}

fdrv
fonte

Uau! Flex realmente rulzzzz! Obrigado!

Pedro Ferreira

use a capa de ajuste ao objeto se desejar que a criança ocupe toda a largura do pai e ainda esteja alinhada verticalmente ao meio. Consulte css-tricks.com/snippets/css/a-guide-to-flexbox para mover a imagem ao redor no pai usando o flex-box

mattdlockyer

11

Você poderia fazer isso:

Demo

http://jsfiddle.net/DZ8vW/1

CSS

.frame {
    height: 25px;      /* Equals maximum image height */
    line-height: 25px;
    width: 160px;
    border: 1px solid red;

    text-align: center; 
    margin: 1em 0;
    position: relative; /* Changes here... */
}
img {
    background: #3A6F9A;
    max-height: 25px;
    max-width: 160px;
    top: 50%;           /* Here.. */
    left: 50%;          /* Here... */
    position: absolute; /* And here */
}

Javascript

$("img").each(function(){
    this.style.marginTop = $(this).height() / -2 + "px";
})

Joseph Marikle
fonte

Agradável. Alguma chance de uma solução de CSS puro?

Arnaud Le Blanc

Infelizmente não, a menos que você queira usar tabelas ou descartar a compatibilidade com versões mais antigas do IE. :( Se você soubesse o tamanho exato das imagens antes da mão que seria diferente, mas não sem que não é possível com CSS sozinho.

Joseph Marikle

@ Joseph Como você o consertaria com tabelas?

Benjamin Udink ten Cate 04/04/11

@Benjamin Udink ten Cate do É confuso, mas isso poderia ser feito desta forma: jsfiddle.net/DZ8vW/2 (isso não é aconselhável, mas deve funcionar)

Joseph Marikle

1

Bem, ele atende perfeitamente às necessidades de arnauds. Sem JS, apenas CSS e HTML.

Benjamin Udink ten Cate 05/09/11

11

http://jsfiddle.net/MBs64/

.frame {
    height: 35px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    text-align: center;
    margin: 1em 0;
    display: table-cell;
    vertical-align: middle;
}
img {
    background: #3A6F9A;
    display: block;
    max-height: 35px;
    max-width: 160px;
}

A propriedade key é display: table-cell;para .frame.Div.frameé exibido como alinhado com isso, então você precisa envolvê-lo em um elemento de bloco.

Isso funciona no Firefox, Opera, Chrome, Safari e Internet Explorer 8 (e posterior).

ATUALIZAR

Para o Internet Explorer 7, precisamos adicionar uma expressão CSS:

*:first-child+html img {
    position: relative;
    top: expression((this.parentNode.clientHeight-this.clientHeight)/2+"px");
}

Webars
fonte

Ótimo. Qualquer hack para o IE7 que evitaria o javascript?

Arnaud Le Blanc

Não tenho certeza, mas talvez as expressões CSS ajudem. Mas eles também são javascript. A única diferença é que você os escreve em arquivos css, não em js.

Webars

Sim, boa ideia. Isso seria mais gerenciável (o script é executado automaticamente conforme necessário) e, como deveria ser apenas no IE7, tudo bem.

Arnaud Le Blanc

7

Minha solução: http://jsfiddle.net/XNAj6/2/

<div class="container">
    <div class="frame">
        <img src="http://jsfiddle.net/img/logo.png" class="img" alt="" />
    </div>
</div>

.container {
    display: table;
    float: left;
    border: solid black 1px;
    margin: 2px;
    padding: 0;
    background-color: black;
    width: 150px;
    height: 150px;
}
.frame {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border-width: 0;
}
.img {
    max-width: 150px;
    max-height: 150px;
    vertical-align: middle;
}

Ilya Lysenko
fonte

7

Isso funciona para navegadores modernos (2016 no momento da edição), como mostrado nesta demonstração no codepen

.frame {
    height: 25px;
    line-height: 25px;
    width: 160px;
    border: 1px solid #83A7D3;          
}
.frame img {
    background: #3A6F9A;
    display:inline-block;
    vertical-align: middle;
}

É muito importante que você atribua uma classe às imagens ou use a herança para direcionar as imagens que você precisa centralizar. Neste exemplo, usamos .frame img {}para que apenas as imagens agrupadas por uma div com uma classe de .framesejam direcionadas.

anglimasS
fonte

apenas ie7, basta colocar a altura da linha: 25px;

precisa saber é o seguinte

1

não parecem ser devidamente alinhados mesmo em Firefox e Chrome ( jsfiddle.net/4RPFa/19 )

Arnaud Le Blanc

7

Experimente esta solução com CSS puro http://jsfiddle.net/sandeep/4RPFa/72/

Talvez seja o principal problema com o seu HTML. Você não está usando aspas quando define c lass& image heightno seu HTML.

CSS:

.frame {
    height: 25px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    position: relative;
    margin: 1em 0;
    top: 50%;
    text-align: center;
    line-height: 24px;
    margin-bottom: 20px;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    line-height: 0;
    margin: 0 auto;
    max-height: 25px;
}

Quando trabalho com a imgtag, ela deixa 3 pixels a 2 pixels de espaço top. Agora eu diminuoline-height e está funcionando.

CSS:

    .frame {
        height: 25px;      /* Equals maximum image height */
        width: 160px;
        border: 1px solid red;
        margin: 1em 0;
        text-align: center;
        line-height: 22px;
        *:first-child+html line-height:24px; /* For Internet Explorer 7 */
    }

    img {
        background: #3A6F9A;
        vertical-align: middle;
        line-height: 0;    
        max-height: 25px;
        max-width: 160px;
    }
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .frame {
        line-height:20px; /* WebKit browsers */
    }

A line-heightpropriedade é renderizada de maneira diferente em diferentes navegadores. Portanto, temos que definir diferentes line-heightnavegadores de propriedades.

Veja este exemplo: http://jsfiddle.net/sandeep/4be8t/11/

Confira este exemplo sobre line-heightdiferentes navegadores: diferenças de altura de entrada no Firefox e Chrome

sandeep
fonte

2

Não funciona (pelo menos no Firefox). Para as aspas faltando, isso é permitido em HTML5 (não sei que tipo de documento é utilizado em que jsFiddle)

Arnaud Le Blanc

7

Não tenho certeza sobre o Internet Explorer, mas no Firefox e Chrome, se você tiver um imgem um divcontêiner, o seguinte conteúdo CSS deverá funcionar. Pelo menos para mim funciona bem:

div.img-container {
    display: table-cell;
    vertical-align: middle;
    height: 450px;
    width: 490px;
}

div.img-container img {
    max-height: 450px;
    max-width: 490px;
}

slava
fonte

IE8 +, infelizmente. Tudo bem para mim, mas talvez não para os outros.

TheCarver

Também note que display:table-cell;não aceita% como larguras

Mutmatt

7

Solução usando uma tabela e células de tabela

Às vezes, deve ser resolvido exibindo como tabela / célula de tabela. Por exemplo, uma tela de título rápida. É uma maneira recomendada pelo W3 também. Eu recomendo que você verifique este link chamado Centralizando um bloco ou imagem do W3C.org.

As dicas usadas aqui são:

Recipiente de posicionamento absoluto exibido como tabela
Vertical alinhado ao conteúdo central exibido como célula da tabela

.container {
    position: absolute;
    display: table;
    width: 100%;
    height: 100%;
}
.content {
    display: table-cell;
    vertical-align: middle;
}

<div class="container">
  <div class="content">
    <h1 style="text-align:center">Peace in the world</h1>
 </div>
</div>

Expandir snippet

Pessoalmente, discordo do uso de ajudantes para esse fim.

Sam
fonte

6

Uma maneira fácil que funciona para mim:

img {
    vertical-align: middle;
    display: inline-block;
    position: relative;
}

Funciona muito bem para o Google Chrome. Experimente este em outro navegador.

DOCTYPE HTML
fonte

6

Para centralizar uma imagem dentro de um contêiner (poderia ser um logotipo) além de um texto como este:

Basicamente, você quebra a imagem

.outer-frame {
  border: 1px solid red;
  min-height: 200px;
  text-align: center; /* Only to align horizontally */
}

.wrapper{
  line-height: 200px;
  border: 2px dashed blue;
  border-radius: 20px;
  margin: 50px
}

img {
  /* height: auto; */
  vertical-align: middle;   /* Only to align vertically */
}

<div class="outer-frame">
  <div class="wrapper">
    some text
    <img src="http://via.placeholder.com/150x150">
  </div>
</div>

Expandir snippet

juliangonzalez
fonte

4

Se você pode viver com margens do tamanho de pixels, basta adicionar font-size: 1px;ao .frame. Mas lembre-se de que agora no .frame1em = 1px, o que significa que você também precisa definir a margem em pixels.

http://jsfiddle.net/feeela/4RPFa/96/

Agora não está mais centrado no Opera…

feeela
fonte

3

Eu tive o mesmo problema. Isso funciona para mim:

<style type="text/css">
    div.parent {
        position: relative;
    }

    img.child {
        bottom: 0;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
    }
</style>

<div class="parent">
    <img class="child">
</div>

algreat
fonte

na verdade, a "posição: fixa" na imagem funcionou para mim, onde fiquei frustrada com as numerosas respostas falsas de pessoas sugerindo o método de célula de tabela que não funcionou em nenhum dos meus trabalhos. Com o método sugerido pelo algreat, você também não precisa de um contêiner extra.

Vasilios Paspalas

2

Você pode usar isto:

 .loaderimage {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin-top: -30px; /* 50% of the height */
    margin-left: -30px;
 }

Masoumeh Karvar
fonte

1

Usando tablee table-cellmethod fazem o trabalho, especialmente porque você também direciona alguns navegadores antigos, eu crio um snippet para você, que você pode executá-lo e verificar o resultado:

.wrapper {
  position: relative;
  display: table;
  width: 300px;
  height: 200px;
}

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

<div class="wrapper">
  <div class="inside">
    <p>Centre me please!!!</p>
  </div>
  <div class="inside">
    <img src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" />
  </div>
</div>

Expandir snippet

Alireza
fonte

0

Eu tenho brincado com o uso de preenchimento para alinhamento central. Você precisará definir o tamanho do contêiner externo de nível superior, mas o contêiner interno deve ser redimensionado e é possível definir o preenchimento com diferentes valores percentuais.

jsfiddle

<div class='container'>
  <img src='image.jpg' />
</div>

.container {
  padding: 20%;
  background-color: blue;
}

img {
  width: 100%;
}

svnm
fonte

0

A melhor solução é que

.block{
    /* Decor */
    padding:0 20px;
    background: #666;
    border: 2px solid #fff;
    text-align: center;
    /* Important */
    min-height: 220px;
    width: 260px;
    white-space: nowrap;
}
.block:after{
    content: '';
    display: inline-block;
    height: 220px; /* The same as min-height */
    width: 1px;
    overflow: hidden;
    margin: 0 0 0 -5px;
    vertical-align: middle;
}
.block span{
    vertical-align: middle;
    display: inline-block;
    white-space: normal;
}

Kumar
fonte

0

Use este:

position: absolute;
top: calc(50% - 0.5em);
left: calc(50% - 0.5em);
line-height: 1em;

E você pode variar font-size.

th3pirat3
fonte

0

Deseja alinhar uma imagem que possui um texto / título e ambos estão dentro de uma div?

Veja no JSfiddle ou no Run Code Snippet.

Apenas certifique-se de ter um ID ou uma classe em todos os seus elementos (div, img, title, etc.).

Para mim, funciona esta solução em todos os navegadores (para dispositivos móveis, você deve adaptar seu código com: @media).

h2.h2red {
    color: red;
    font-size: 14px;
}
.mydivclass {
    margin-top: 30px;
    display: block;
}
img.mydesiredclass {
    margin-right: 10px;
    display: block;
    float: left; /* If you want to allign the text with an image on the same row */
    width: 100px;
    heght: 100px;
    margin-top: -40px /* Change this value to adapt to your page */;
}

<div class="mydivclass">
    <br />
    <img class="mydesiredclass" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Wikipedia-logo-v2-en.svg/2000px-Wikipedia-logo-v2-en.svg.png">
    <h2 class="h2red">Text aligned after image inside a div by negative manipulate the img position</h2>
</div>

Expandir snippet

mariusfv
fonte

Como alinhar verticalmente uma imagem dentro de uma div

Exemplo

Respostas:

Demo

CSS

Javascript

Solução usando uma tabela e células de tabela