HTML > Centering Div

[Xenobius]

Επειδη ειχα φάει κι εγώ ώρες μέχρι να βρω το καλύτερο, αν εχεις καθορίσει το width του div (πχ 600px) σου τότε χρησιμοποιησε το εξής

 

>	.main2{
position: absolute;
width:600px;
left: 50%;
margin-left: -300px; 
}

 

Και στο div σου θα το βαλεις σαν class και όχι id.

 

><div class="main2">
BLA BLA BLA
</div>

 

Πιανει παντα χωρις παραπλευρες απώλειες!

[PCharon]

Δεδομένου πως το ζητούμενο πλάτος είναι 80% το καλύτερο είναι το δικό μου.

 

margin:0 10%;

[Xenobius]

Καλά εννοειται, το θέμα είναι το να βαλεις margin αναλογο του width σου . Αν παιξεις με width σε px, τοτε και το margin θα ειναι σε px, το ιδιο και για τα ποσοστά %.

[PCharon]

Αρχηγέ αυτό έκανα. Θέλει πλάτος 80% στο div του. Όταν εσύ ρίχνεις 10% από δω κι από εκεί, πάντα 80% έχει το div και είναι πάντα στη μέση. Το έγραψα και παραπάνω, όταν το ζητούμενο πλάτος είναι % τότε η τέλεια λύση είναι αυτό που έδωσα, δεν υπάρχει λόγος για κάτι άλλο.

 

Σε πίξελ είναι άλλη κουβέντα, το είπα και παραπάνω. Λύσεις σε πίξελ, λιγότερο και περισσότερο όμορφες (τη χρήση του attribute align τη βάζω στις χειρότερες πάντως), υπάρχουν αρκετές.

 

Κατά κανόνα αν έχεις το template μπροστά σου τις περισσότερες φορές μπορείς να φέρεις κάτι εκεί που θέλεις με άλλες τεχνικές, μπορεί να μην χρειαστεί καν κεντράρισμα όπως νόμιζες.

[kalogeros]

Δεδομένου πως το ζητούμενο πλάτος είναι 80% το καλύτερο είναι το δικό μου.

 

margin:0 10%;

 

θα μπορούσε να το κάνει και με relative position και θα ήταν εξίσου σωστό.

>
<div style="position: relative; left: 10%;">blah blah blah</div>

[warlock9_0]

γιαtί δε βάζει στο css του div

>margin-left:auto;margin-right:auto

 

ορίζεις και το πλάτος του div και είσαι άρχοντας στο κέντρο

[PCharon]

Κάποιες φορές μας διαφεύγουν πράγματα, ακόμα κι αν «ασχολούμαστε» με κάτι.

Έκανα λίγο κόπο για ένα δοκιμαστικό συμβατότητας με όσους φυλλομετρητές έχω στο PC.

 

υπόμνημα

δουλεύει (το ζητούμενο div πρέπει να είναι στο κέντρο με πλάτος 80%)

δουλεύει αλλά είναι deprecated ή/και μη έγκυρο σε συγκεκριμένα doctypes

δουλεύει αλλά όχι σωστά ή/και προκαλεί παρενέργειες στο layout

δε δουλεύει

bold σημαίνει πως η λύση εφαρμόζει και σε απόλυτο width (pixels)

 

 

IE6 IE7 IE8 ΙΕ9 Chrome.16x Firefox.7x Opera.11x Safari.5x

><div style="width:80%;margin:0 auto;"></div>

 

IE6 IE7 IE8 ΙΕ9 Chrome.16x Firefox.7x Opera.11x Safari.5x

><div style="margin:0 10%;"></div>

 

IE6 IE7 IE8 ΙΕ9 Chrome.16x Firefox.7x Opera.11x Safari.5x

><div style="position:relative;left:10%;width:80%;"></div>

 

IE6 IE7 IE8 ΙΕ9 Chrome.16x Firefox.7x Opera.11x Safari.5x

><div style="position:absolute;width:80%;left:50%;margin-left:-40%;"></div>

 

IE6 IE7 IE8 ΙΕ9 Chrome.16x Firefox.7x Opera.11x Safari.5x

><center><div style="width:80%"></div></center>

 

IE6 IE7 IE8 ΙΕ9 Chrome.16x Firefox.7x Opera.11x Safari.5x

><div align="center"><div style="width:80%"></div></div>

Επεξ/σία 2 Φεβρουαρίου 2012 από PCharon

[kalogeros]

 

IE6 IE7 IE8 ΙΕ9 Chrome.16x Firefox.7x Opera.11x Safari.5x

><div style="position:relative;left:10%;"></div>

 

Είσαι σίγουρος ότι δεν δουλεύει; Γιατί μόλις το δοκίμασα σε IE9, FF9 και Chrome16 και δουλεύει κανονικότατα. Ξαναδοκίμασε το.

 

Tip: Το ζητούμενο div εμπεριέχεται σε ένα άλλο με στάνταρντ πλάτος (είτε σταθερό είτε σχετικό).

[PCharon]

Βάλε του χρώμα στο background για να ανακαλύψεις πως δεν έχει πλάτος το ζητούμενο 80%, φεύγει δεξιά.

[edit] ρε συ, τί μλκ μου, αν ορίσεις το width τότε δουλεύει. Μισό να ξαναδοκιμάσω με ορισμένο το width... (έπρεπε να είχε γίνει από την αρχή)

Το position relative δε νομίζω να χρειάζεται κάτι, εκτός αν κάποια κλάση του δίνει absolute.

Ωραίος κι εσύ λοιπόν!

 

Λοιπόν, με ορισμένο και το width ΚΑΙ η δική σου λύση δουλεύει σωστά, όταν έχουμε να ορίσουμε %.

 

Οι μόνες λύσεις που δουλέυουν πάντα ΚΑΙ σε περίπτωση που ορίζουμε pixels και όχι % (και δουλεύουν και στον ΙΕ που αποτελεί το 40% των επισκεπτών συνολικά) είναι οι κακάσχημες με το μωβ. Η καλύτερη «νόμιμη» προσέγγιση για pixels είναι του Xenobius, αλλά χρειάζεται λίγο ανάπτυξη ακόμα και δημιουργεί προβληματάκια στο layout.

[kalogeros]

Βάλε του χρώμα στο background για να ανακαλύψεις πως δεν έχει πλάτος το ζητούμενο 80%, φεύγει δεξιά.

[edit] ρε συ, τί μλκ μου, αν ορίσεις το width τότε δουλεύει. Μισό να ξαναδοκιμάσω με ορισμένο το width... (έπρεπε να είχε γίνει από την αρχή)

 

Λοιπόν, με ορισμένο και το width ΚΑΙ η δική σου λύση δουλεύει σωστά, όταν έχουμε να ορίσουμε %.

 

[SlackulatoR]

Επειδη ειχα φάει κι εγώ ώρες μέχρι να βρω το καλύτερο, αν εχεις καθορίσει το width του div (πχ 600px) σου τότε χρησιμοποιησε το εξής

 

>	.main2{
position: absolute;
width:600px;
left: 50%;
margin-left: -300px; 
}

 

Και στο div σου θα το βαλεις σαν class και όχι id.

 

><div class="main2">
BLA BLA BLA
</div>

Πιανει παντα χωρις παραπλευρες απώλειες!

Παιδιά κάνω ένα bump. Χρησιμοποιώντας τον κώδικα παραπάνω αν κάνω resize τον browser το div μετακινείται, ενώ θέλω να παραμένει στο κέντρο. Το align=center στο div δεν δουλεύει. Το position absolute δεν θα έπρεπε να το κρατάει στο κέντρο του browser;

[Xenobius]

Αν στο resize κάνεις το παράθυρο μικρότερο από το 600px μόνο τότε δεν θα μπορεί να το κρατήσει στο κέντρο.

 

Αλλιώς το κρατάει κανονικά.

[SlackulatoR]

Άρα να χρησιμοποιήσω table για να κάνω αυτό που θέλω; Δεν υπάρχει τρόπος να μένει κάποιο div στο κέντρο;

[PCharon]

Κατάλαβες τί σου έγραψε ο Xenobius;

 

Αν έχεις ορίσει σταθερό πλάτος σε pixels, τότε δεν έχει κανένα νόημα να απαιτείς να μένει στο κέντρο όταν μικραίνει πολύ το παράθυρο. Εκείνο που έχει νόημα είναι να ορίζεις σταθερά πλάτη τέτοια ώστε το layout σου να δείχνει σωστά στο 90-95% των αναλύσεων οθόνης των χρηστών.

[SlackulatoR]

Ωραία, άρα δηλαδή το ίδιο γίνεται και με το ποσοστό %; Με το table δεν είχα τέτοιο πρόβλημα πάντως, γιατί να μην το χρησιμοποιήσω λοιπόν;