CSS - Centra verticalmente un'immagine all'interno di un div floated

Ho deciso di gettare la spugna su questo problema e ho bisogno di aiuto :). Come per titolo, cerco di allineare verticalmente un'immagine avvolta in un elemento di ancoraggio nel centro di un div a quota fissa flottante.CSS - Centra verticalmente un'immagine all'interno di un div floated

Fatto un sacco di ricerca su google per le soluzioni e l'armadio che posso ottenere è sotto quando il div non è flottato (comunque deve essere). Qualsiasi idea sarebbe molto apprezzata!

.class_name { 
/*float: left*/ 
width:153px; 
height:153px; 
margin:3px; 
padding:4px; 
border:1px solid #dedede; 
text-align: center; 
vertical-align: middle; 
background-color: #000; 
display: table-cell; 
} 

<div class="class_name"> 
    <a href=""><img src="image.jpg" alt="" /></a> 
</div>

fonte

2010-09-07 Hayden

Qualcun altro ha qualche idea? – Hayden

Se l'altezza è fissa e si conosce la dimensione dell'immagine, è sufficiente posizionare l'immagine manualmente. Utilizzare position:absolute;top:25px; sull'immagine o qualcosa di simile oppure aggiungere un margine all'immagine: margin:25px 0;.

fonte

2010-09-07 02:30:24 mattbasta

A volte l'immagine può avere un'altezza diversa. Grazie comunque! – Hayden

C'è una soluzione del browser css croce per questo qui disponibili: http://www.vdotmedia.com/blog/vertically-center-content-with-css/

fonte

2010-09-07 02:44:52 Jamie

Ah sì, mi sono imbattuto in questo. Ancora lo stesso problema però quando è floated che è molto frustrante! – Hayden

Beh, mi sono imbattuto nello stesso problema di ieri sera (per una galleria-come tipo di cosa), e sono riusciti a trovare una soluzione dopo inciampo su this page. Sono contento di segnalare che anche questo sembra funzionare per gli elementi fluttuanti!

Il trucco è fondamentalmente quello di dare l'elemento esterno "display: table;", e l'elemento interno (contenente l'img) "display: table-cell;".

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html><head> 
<style type="text/css"> 
.class_name { 
    display: table; 
    float: left; 
    overflow: hidden; 
    width: 153px; 
    height: 153px; 
} 

.class_name a { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 
</style> 
</head> 
<body> 
    <div class="class_name"> 
     <a href=""><img src="image.jpg" alt="" /></a> 
    </div> 
</body> 
</html>

Per IE8, è necessario essere in modalità standard. È necessario un ulteriore posizionamento per farlo funzionare in IE7:

<!--[if lte IE 7]><style type="text/css"> 
.class_name { 
    position: relative; 
} 
.class_name a { 
    position: absolute; 
    top: 50%; 
} 
.class_name img { 
    position: relative; 
    top: -50%; 
    width: 100%; 
} 
</style><![endif]-->

fonte

2010-10-14 10:23:25 Paul

pulito. Non so se è il modo migliore ma funziona bene http://www.jsfiddle.net/NgqE2/ – Shikiryu

@Shikiryu Grazie! Finalmente ha funzionato per me! – jibiel

Ricordarsi di inserire l'immagine in qualche altro tag. Era "" in questo caso. Altrimenti non funzionerà. – Ciwan

CSS - Centra verticalmente un'immagine all'interno di un div floated

risposta

Problemi correlati