Come allineare verticalmente un'immagine all'interno di un div


1457

Come è possibile allineare un'immagine all'interno di un contenitore div?

Esempio

Nel mio esempio, ho bisogno di centrare verticalmente il <img>in <div>con class ="frame":

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

.frameL'altezza è fissa e l'altezza dell'immagine è sconosciuta. Posso aggiungere nuovi elementi .framese questa è l'unica soluzione. Sto provando a farlo su Internet Explorer 7 e versioni successive, WebKit, Gecko.

Vedi il jsfiddle qui .

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


3
Ciao, scusa ma non sono d'accordo sul fatto che usare un aiuto sia la soluzione più apprezzata. Ma non è l'unico modo. Altri sono ugualmente supportati dai browser. Offro una soluzione qui stackoverflow.com/a/43308414/7733724 e W3C.org sulle informazioni. Puoi controllare. Saluti
Sam

Sarà utile leggere l'articolo su Centering Things sul W3C: w3.org/Style/Examples/007/center.en.html
QMaster

Risposte:


2128

L'unico modo (e il miglior cross-browser) che conosco è quello di utilizzare un inline-blockhelper con height: 100%e vertical-align: middlesu entrambi gli elementi.

Quindi c'è una soluzione: http://jsfiddle.net/kizu/4RPFa/4570/

Oppure, se non vuoi avere un elemento in più nei browser moderni e non ti dispiace usare le espressioni di Internet Explorer, puoi usare uno pseudo-elemento e aggiungerlo a Internet Explorer usando una comoda espressione, che viene eseguita una sola volta per elemento , quindi non ci saranno problemi di prestazioni:

La soluzione con :beforee expression()per Internet Explorer: http://jsfiddle.net/kizu/4RPFa/4571/


Come funziona:

  1. Quando hai due inline-blockelementi vicini, puoi allinearli l'uno con l'altro, quindi vertical-align: middleotterrai qualcosa del genere:

    Due blocchi allineati

  2. Quando si dispone di un blocco con altezza fissa (in px, emo un'altra unità assoluta), è possibile impostare l'altezza dei blocchi interni in %.

  3. Quindi, aggiungerne uno inline-blockcon height: 100%in un blocco ad altezza fissa allineare un altro inline-blockelemento ( <img/>nel tuo caso) verticalmente vicino ad esso.

2
Puoi vedere tu stesso: jsfiddle.net/kizu/Pw9NL - solo le caselle in linea non generano una casella, ma tutti gli altri casi funzionano bene.
Kizu,

3
Ottima risposta Stavo lottando con gli spazi tra gli elementi del blocco inline, che significa tra .framee .frame:before. Una soluzione proposta qui è di aggiungere margin-left: -4pxa .frame. Spero che sia di aiuto.
Mick,

111
ATTENZIONE che: <img src=""/>NON è all'interno <span></span>dell'helper che è stato aggiunto. È fuori. Ho quasi strappato ogni ciocca di capelli non rendendosene conto.
Ryan,

50
Sembra che tu debba anche aggiungere "white-space: nowrap;" al frame o si verificherà un problema se si verifica un'interruzione di linea tra l'immagine e l'intervallo dell'helper. Mi ci è voluta un'ora perché questa soluzione non funzionasse per me.
juminoz,

2
Nel mio caso, la mia immagine aveva altezza massima e larghezza massima entrambe impostate al 100%, quindi l'immagine avrebbe ridimensionato il contenitore e questo metodo non funzionava. La mia soluzione era quella di cambiare questi valori al 90% (che nel mio caso andava bene; in un'altra situazione potrebbe essere necessario ridimensionare il contenitore di conseguenza) e aggiungere anche un supporto sull'altro lato dell'immagine in modo che l'imbottitura rimanga anche su entrambe le parti.
Eric Dubé,

513

Questo potrebbe essere utile:

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

74
Se si desidera allineare anche orizzontalmente l'immagine, aggiungere a sinistra: 0; a destra: 0; a img
jameskind

questo rally non funziona in IE10? Ho usato questo dappertutto
Max Yari il

Funziona anche (per me) con container div avendoposition:fixed;
PJ Brunet

1
La soluzione più semplice e pulita grazie!
KDT

Grazie! Ha funzionato per me !!
Alexander Malygin,

486

La soluzione di matejkramny è un buon inizio, ma le immagini di grandi dimensioni hanno un rapporto sbagliato.

Ecco la mia forchetta:

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

anteprima


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

Qualche modo per adattarlo in modo da poter ingrandire l'immagine sovradimensionata, diciamo 2x, e rimarrebbe comunque centrato in orizzontale e in verticale?
Giustino,

Se vogliamo farlo funzionare per l'allineamento verticale in basso anziché in mezzo, quali codici devono essere modificati?
Bobo,

1
@bobo basta rimuovere il top: 0;. Ciò si traduce in bottom: 0;un'applicazione verticale.
jomo,

La migliore risposta!
user315338

278

Una soluzione a tre righe:

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

Questo vale per qualsiasi cosa.

Da qui .


Prefissi: -ms- o -webkit- (prima della trasformazione). w3schools.com/cssref/css3_pr_transform.asp
Jorge Orpinel,

3
Prefissi per IE9, ma non funzionano affatto in IE8 e precedenti: caniuse.com/#search=transform Ma la mia opinione: non mi interessa IE8
Reign.85

Nessuno ha notato cosa succede quando il bambino da centrare è più alto dello schermo del dispositivo e il genitore è il primo figlio in DOM ...?
Tao,

3
Bello quando non puoi usarlo position: absolute;perché hai bisogno di una larghezza fluente.
pl00

2
La migliore soluzione finora, persino migliore della flexbox, con un supporto per la maggior parte dei browser moderni e vecchi. Valuti questo per favore
albanx il

142

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

Cose chiave

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

Per favore, lasciami fare riferimento a una guida qui che funziona anche per IE5 (deducendo da ciò che ho letto finora nel post) webmasterworld.com/css/3350566.htm
Matej

questa soluzione è un buon inizio, ma le immagini di grandi dimensioni vengono ridimensionate con un rapporto errato . Si prega di vedere la mia risposta.
jomo,

@ HansWürstchen sì, ma il punto è centrare, se viene sovradimensionato è la scelta del design. Aggiunta di più css = più disordine :)
Matej

1
@matejkramny non viene sovradimensionato. se l'immagine è sovradimensionata, ha un rapporto errato. ciò significa che è allungato in altezza e non ha un aspetto corretto.
jomo,

✔ Caspita, funziona con immagini straripanti (più grandi del wrapper), la risposta accettata no.
Cedric Reichenbach il

120

Per una soluzione più moderna e se non è necessario supportare i browser legacy, puoi farlo:

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

Ecco una penna: http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e


3
Ciò è particolarmente utile se l'altezza del contenitore non è impostata
Dave Barnett,

o align-selfper singoli oggetti
Michael,

Il problema align-selfè che gli oggetti flessibili allungheranno l'altezza del contenitore padre.
Ricardo Zea,

101

In questo modo puoi centrare un'immagine verticalmente ( demo ):

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

4
Stranamente non sono riuscito a ottenere la risposta accettata per funzionare nella mia situazione (stavo anche ritagliando l'immagine con overflow: nascosto). Questo ha funzionato perfettamente però.
Luca Spiller,

3
L'ho provato solo in Chrome, ma l'altezza della linea sembra essere la chiave. Ho messo l'attributo di allineamento verticale sul div piuttosto che sull'img, dato che il mio img è all'interno di un'ancora (<a/>).
Todd Price,

1
Sì, molto più semplice della soluzione accettata e funziona magnificamente. Ho anche trovato questa soluzione in jsfiddle.
vdboor

1
Se sai quali altezze soddisfare, questo funziona abbastanza bene
KrekkieD

Dal mio expierence questa soluzione funziona solo con il font-size: 0per div. Per contenitori abbastanza grandi puoi perderlo, ma se il tuo divè 100 px e img è 80 px sarà inferiore di qualche pixel.
alTus,

38

Inoltre, è possibile utilizzare Flexbox per ottenere il risultato corretto:

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


28

C'è una soluzione semplicissima con flexbox!

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

5
Sì, ma difficilmente puoi vederlo in tutte le risposte. Stavo cercando di evidenziarlo in modo semplice e chiaro poiché è una soluzione molto più semplice di tutte le altre risposte.
BBlackwo,

Questa è la risposta migliore che ha funzionato anche per me. Ma nel mio caso nel frame "inline-flex" ha funzionato meglio per me. e per l'immagine al suo interno ho aggiunto: "vertical-align: middle".
Sophie Cooperman,

22

Potresti provare a impostare il CSS di PI su display: table-cell; vertical-align: middle;


Ho visto vari metodi, ma questo era nuovo (anche nel 2013) per me.
Mike Ebert,

Meglio che mettere l'immagine all'interno di un tavolo solo per centrarla.
Jonats,

3
display: table-cell non si dimensiona sempre correttamente se vuoi che la larghezza sia al 100%
Redtopia

1
Che cos'è " PI"?
Peter Mortensen,

18

Puoi provare il codice seguente:

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


14

Soluzione per l'immagine di sfondo

Ho rimosso del tutto l'elemento immagine e l'ho impostato come sfondo del div con una classe di .frame

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

Questo almeno funziona bene su Internet Explorer 8, Firefox 6 e Chrome 13.

Ho controllato e questa soluzione non funzionerà per ridurre le immagini di altezza superiore a 25 pixel. Esiste una proprietà chiamata background-sizeche imposta la dimensione dell'elemento, ma è CSS 3 che sarebbe in conflitto con i requisiti di Internet Explorer 7.

Ti consiglierei di rifare le priorità del tuo browser e progettare i migliori browser disponibili o di ottenere un codice sul lato server per ridimensionare le immagini se desideri utilizzare questa soluzione.


Soluzione molto bella, tuttavia mi aspetto che alcune immagini siano più grandi del contenitore, e in questo caso ho pianificato di utilizzare l'altezza massima / larghezza massima su di esse. Un modo per farlo con le immagini di sfondo?
Arnaud Le Blanc,

questo non è un "elemento .frame", è un "div con una classe di .frame"
JGallardo,

Se l'altezza dell'immagine non supera l'altezza del div frame, questa è la soluzione migliore e più semplice ...
efirat

13

Immagina di avere

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

E css:

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

UAU! Flex davvero rulzzzz! Grazie!
Pedro Ferreira,

utilizzare la copertura adatta agli oggetti se si desidera che il bambino occupi l'intera larghezza del genitore e sia comunque allineato verticalmente al centro. Visita css-tricks.com/snippets/css/a-guide-to-flexbox per spostare l'immagine all'interno del genitore usando il flex-box
mattdlockyer

11

Potresti farlo:

dimostrazione

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

Bello. Qualche possibilità per una soluzione pure-css?
Arnaud Le Blanc,

Purtroppo no, a meno che non si desideri utilizzare le tabelle o eliminare la compatibilità con le versioni precedenti di IE. :( Se avessi saputo in anticipo la dimensione esatta delle immagini sarebbe diverso, ma non senza questo non è possibile solo con CSS.
Joseph Marikle

@Joseph Come lo aggiusteresti con le tabelle?
Benjamin Udink ten Cate

@Benjamin Udink ten Cate È disordinato ma potrebbe essere fatto in questo modo: jsfiddle.net/DZ8vW/2 (questo non è consigliato, ma dovrebbe funzionare)
Joseph Marikle

1
Beh, si adatta perfettamente alle esigenze degli arnaud. No JS, solo CSS e HTML.
Benjamin Udink ten Cate,

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

La proprietà chiave è display: table-cell;per .frame.Div.frameviene visualizzato come in linea con questo, quindi è necessario avvolgerlo in un elemento di blocco.

Funziona con Firefox, Opera, Chrome, Safari e Internet Explorer 8 (e versioni successive).

AGGIORNARE

Per Internet Explorer 7 dobbiamo aggiungere un'espressione CSS:

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

Grande. Qualche hack per IE7 che eviterebbe il javascript?
Arnaud Le Blanc,

Non ne sono sicuro, ma forse le espressioni css potrebbero essere d'aiuto. Ma sono anche javascript. L'unica differenza è che li scrivi nei file CSS, non in js.
Webar,

Sì, bella idea. Sarebbe più gestibile (lo script viene eseguito automaticamente in base alle esigenze) e, dato che dovrebbe essere solo IE7, va bene.
Arnaud Le Blanc,

7

La mia soluzione: 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;
}

7

Questo funziona per i browser moderni (2016 al momento della modifica), come mostrato in questa demo su codepen

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

È molto importante assegnare una classe alle immagini o utilizzare l'ereditarietà per scegliere come target le immagini di cui hai bisogno. In questo esempio abbiamo usato in .frame img {}modo che .framefossero mirate solo le immagini avvolte da un div con una classe di .


solo ie7, basta inserire l'altezza della linea: 25px;
anglimaS

1
non sembra essere correttamente allineato nemmeno su Firefox e Chrome ( jsfiddle.net/4RPFa/19 )
Arnaud Le Blanc

7

Prova questa soluzione con CSS puro http://jsfiddle.net/sandeep/4RPFa/72/

Forse è il problema principale con il tuo HTML. Non stai usando le virgolette quando definisci c lass& image heightnel tuo 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 lavoro con il imgtag, lascia da 3 pixel a 2 pixel di spazio top. Ora diminuisco line-heighte funziona.

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

La line-heightproprietà viene visualizzata in modo diverso nei diversi browser. Quindi, dobbiamo definire diversi line-heightbrowser di proprietà.

Dai un'occhiata a questo esempio: http://jsfiddle.net/sandeep/4be8t/11/

Dai un'occhiata a questo esempio sui line-heightdiversi in diversi browser: inserisci differenze di altezza in Firefox e Chrome


2
Non funziona (almeno in Firefox). Per le citazioni mancanti, questo è consentito in HTML5 (non so quale doctype sia usato in jsfiddle)
Arnaud Le Blanc,

7

Non sono sicuro di Internet Explorer, ma in Firefox e Chrome, se ne hai uno imgin un divcontenitore, dovrebbe funzionare il seguente contenuto CSS. Almeno per me funziona bene:

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

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

IE8 +, purtroppo. Va bene per me, ma forse non per gli altri.
TheCarver,

nota anche che display:table-cell;non accetta% come larghezze
Mutmatt

7

Soluzione utilizzando una tabella e celle di tabella

A volte dovrebbe essere risolto visualizzando come tabella / tabella-cella. Ad esempio, una schermata del titolo veloce. È un modo consigliato anche da W3. Ti consiglio di controllare questo link chiamato Centrare un blocco o un'immagine da W3C.org.

I suggerimenti usati qui sono:

  • Contenitore di posizionamento assoluto visualizzato come tabella
  • Verticale allineato al centro del contenuto visualizzato come cella di tabella

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

Personalmente in realtà non sono d'accordo sull'uso degli helper per questo scopo.


6

Un modo semplice che funziona per me:

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

Funziona molto bene con Google Chrome. Prova questo in un altro browser.


6

Per centrare un'immagine all'interno di un contenitore (potrebbe essere un logo) oltre ad alcuni testi come questo:

Inserisci qui la descrizione dell'immagine

Fondamentalmente avvolgi l'immagine

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


4

Se riesci a vivere con margini di dimensioni pixel, aggiungi semplicemente font-size: 1px;a .frame. Ma ricorda, che ora sul.frame 1em = 1px, il che significa che devi impostare anche il margine in pixel.

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

Ora non è più centrato su Opera ...


3

Ho avuto lo stesso problema. Questo funziona per me:

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

in realtà la "posizione: fissa" sull'immagine ha funzionato per me, dove sono stato frustrato per le numerose false risposte di persone che suggeriscono il metodo a cella di tabella che non ha funzionato in seguito ai miei lavori. Con il metodo suggerito da algreat non è necessario un contenitore aggiuntivo.
Vasilios Paspalas,

2

Puoi usare questo:

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

1

L'uso tablee il table-cellmetodo eseguono il lavoro, specialmente perché hai come target anche alcuni vecchi browser, creo uno snippet per te che puoi eseguirlo e controllare il risultato:

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


0

Ho giocato con l'uso dell'imbottitura per l'allineamento centrale. Sarà necessario definire la dimensione del contenitore esterno di livello superiore, ma il contenitore interno deve ridimensionarsi e è possibile impostare il riempimento con valori percentuali diversi.

jsfiddle

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

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

img {
  width: 100%;
}

0

La soluzione migliore è quella

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

0

Usa questo:

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

E puoi variare font-size.


0

Vuoi allineare un'immagine che ha dopo un testo / titolo ed entrambi sono all'interno di un div?

Vedi su JSfiddle o Esegui snippet di codice.

Assicurati solo di avere un ID o una classe in tutti i tuoi elementi (div, img, titolo, ecc.).

Per me funziona questa soluzione su tutti i browser (per i dispositivi mobili è necessario adattare il codice con: @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>

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.