CSS κεντράρισμα εικόνας

[pseudonymos]

Καλημέρα σε όλους,

 

προσπαθώ να κεντράρω μια φωτογραφία στο κέντρο της οθόνης με την τεχνική margin:0px auto .

Ενώ σε δύο τρεις που είδα δεν ορίζουν width και δουλεύει μια χαρά, εγώ αν δεν ορίσω δεν κεντράρεται.

 

>#home_panel
{
position:absolute;
width:100%;
height:100%;
}
#home_frame
{
background-color:#000;
position:relative;
/*width:515px;*/
margin-left:auto;
margin-right:auto;
padding:0px 2px 2px;
}

 

><div id="home_panel">
 <div id="home_frame"><img src="....">
 </div>
</div>

 

Γνωρίζει κανείς γιατί;;

[_tasos]

Πρέπει να βάλεις στο #home_panel το rule margin:0px auto;

[Alan Fall]

Εσύ στην ουσία πας να κεντράρεις το home_frame div στο οποίο δεν έχεις ορίσει διαστάσεις. Γιαυτό δεν κεντράρει.

Τα divisions δεν κεντράροντε αν δεν τους ορίσεις διαστάσεις.

 

Anyway υπάρχουν πολλοί τρόποι να κεντράρεις την εικόνα όπως τα έχεις βάλει, εκ των οποίων οι καλύτερος είναι να κάνεις την εικόνα block element και να την κεντράρεις με το margin:0 auto;

 

Αστα όπως τα έχεις απλά πρόσθεσε αυτό:

 

#home_frame img { display:block; margin:0 auto; }

[theomalegan]

Νομίζω και εγώ ότι το έχεις πάρει ανάποδα το θέμα.

[thanasis00]

πρέπει να δώσεις ένα width στο home_frame. Όταν του λες margin-left:auto; margin-right:auto; του λες να προσαρμόσει το div με ίσα κενά δεξιά και αριστερά, αλλά δε του λες πόσο πλάτος πρέπει να έχει το div, οπότε αυτό, πιάνει όλο το πλάτος.

[Chemical]

υπαρχει και το <center></center>

[orotoi]

Το οποίο είναι deprecated