Κεντράρισμα ενός div καθέτως και οριζοντίως

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Κεντράρισμα ενός div καθέτως και οριζοντίως

Δημοσίευση από dimsis » 06 Οκτ 2009 19:32

Κεντράρισμα ενός div καθέτως και οριζοντίως σε ολόκληρη την οθόνη ανεξαρτήτως ανάλυσης

Κώδικας: Επιλογή όλων

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Κεντράρισμα ενός div καθέτως και οριζοντίως σε ολόκληρη την οθόνη ανεξαρτήτως ανάλυσης. Center div Horizontal and vertical</title>
<style type="text/css">
body &#123;
	text-align&#58; center;
	font-family&#58; sans-serif;
&#125;
#cntdiv &#123;
	position&#58; fixed; /* θέση σταθερή */
	width&#58; 200px; /* πλάτος */
	height&#58; 100px; /* ύψος */
	margin-left&#58; -100px;  /* το μισό του width */
	margin-top&#58; -50px; /* το μισό του height */
	top&#58; 50%; /* το μετακινούμε στο 50% από πάνω ... */
	left&#58; 50%; /* ... και στο 50% από αριστερά */
	text-align&#58; left; /* αριστερή στοίχιση του κειμένου μέσα στο div layer */
	padding&#58; 5px; /* απόσταση κειμένου από το περίγραμμα του div layer */
	border&#58; 2px solid #ffd324; /* περίγραμμα με 2pixel πάχος */
	background-color&#58;#FFC; /* χρώμα γεμίσματος του div layer */
&#125;
</style>
</head>
<body>
<div id="cntdiv">Εδώ βάλε το περιεχόμενο σου.<br />π.χ. freestuff.gr Rulez</div>
</body>
</html>
demo: http://www.avadaz.com/playground/centerdiv.htm


Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Κεντράρισμα ενός div καθέτως και οριζοντίως

Δημοσίευση από korgr » 06 Οκτ 2009 20:39

Ωραιος ο Δημητρης! :D
Την απορια βεβαια παντα θα την εχω.
Γιατι να υποχρεωνομαστε σε ολοκληρες αλχημειες και να μην υπαρχει διαθεσιμη και μια valign css property?

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Κεντράρισμα ενός div καθέτως και οριζοντίως

Δημοσίευση από dimsis » 06 Οκτ 2009 20:57

Έλα ντε... θα έπρεπε να είχε κάτι σαν την vertical-align:middle και να κέντραρε το div με τη μια... στην CSS4 ίσως :)

Άβαταρ μέλους
ThyClub
Honorary Member
Δημοσιεύσεις: 5312
Εγγραφή: 17 Νοέμ 2003 00:21
Τοποθεσία: Hell's Kitchen
Επικοινωνία:

Κεντράρισμα ενός div καθέτως και οριζοντίως

Δημοσίευση από ThyClub » 06 Οκτ 2009 22:11

Κώδικας: Επιλογή όλων

DIV.container &#123;
min-height&#58; 10em;
display&#58; table-cell;
vertical-align&#58; middle
&#125;

Κώδικας: Επιλογή όλων

<div class="container">

Vertical middle

</div>
Το παραπάνω κάνει το ίδιο και για περιεχόμενο μέσα σε divs. Αν θέλει κάποιος ας το δοκιμάσει και στο body. :wink:

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Κεντράρισμα ενός div καθέτως και οριζοντίως

Δημοσίευση από dimsis » 06 Οκτ 2009 22:21

Το ίδιο το div να κεντράρεται εύκολα οριζοντίως και καθέτως λέμε Βασίλη, όχι τα περιεχόμενα του.
Δηλαδή ακόμα και το margin:0 auto για οριζοντίως είναι λάθος. Θα έπρεπε να το είχαν κάτι σαν το divalign:center των tables και να τέλειωνε η δουλειά.

Άβαταρ μέλους
ThyClub
Honorary Member
Δημοσιεύσεις: 5312
Εγγραφή: 17 Νοέμ 2003 00:21
Τοποθεσία: Hell's Kitchen
Επικοινωνία:

Κεντράρισμα ενός div καθέτως και οριζοντίως

Δημοσίευση από ThyClub » 06 Οκτ 2009 22:30

Όχι Δημήτρη κατάλαβα για ποιό πράγμα λέτε, απλά έριξα αυτό για να υπάρχει και πρόσθεσα και ένα τεστάκι να το έκανε κάποιος για να μας πεί αν δουλεύει και στο body. :wink:

Άβαταρ μέλους
tsiger
Honorary Member
Δημοσιεύσεις: 1431
Εγγραφή: 11 Νοέμ 2002 13:40
Τοποθεσία: Thessaloniki Observation Center
Επικοινωνία:

Κεντράρισμα ενός div καθέτως και οριζοντίως

Δημοσίευση από tsiger » 06 Οκτ 2009 23:39

Δημήτρη στον IE6 σου λειτουργεί; Γιατί στον δικό μου δεν χεχ.

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Κεντράρισμα ενός div καθέτως και οριζοντίως

Δημοσίευση από korgr » 07 Οκτ 2009 00:03

tsiger έγραψε:Δημήτρη στον IE6 σου λειτουργεί; Γιατί στον δικό μου δεν χεχ.
What's IE6??? :lol: :lol: :lol:

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Κεντράρισμα ενός div καθέτως και οριζοντίως

Δημοσίευση από dimsis » 07 Οκτ 2009 00:40

Σιγά μη παίζει σε ΙΕ6 και 5.5 :)
Έχω κόψει ακόμα και στη δουλειά να τεστάρω σε 6άρη να σου πω την αλήθεια.

Άβαταρ μέλους
vassilism
Δημοσιεύσεις: 1952
Εγγραφή: 17 Μαρ 2007 14:47
Επικοινωνία:

Κεντράρισμα ενός div καθέτως και οριζοντίως

Δημοσίευση από vassilism » 07 Οκτ 2009 01:21

dimsis έγραψε:Έχω κόψει ακόμα και στη δουλειά να τεστάρω σε 6άρη να σου πω την αλήθεια.
Κακώς κατά τη γνώμη μου.

Άβαταρ μέλους
tsiger
Honorary Member
Δημοσιεύσεις: 1431
Εγγραφή: 11 Νοέμ 2002 13:40
Τοποθεσία: Thessaloniki Observation Center
Επικοινωνία:

Κεντράρισμα ενός div καθέτως και οριζοντίως

Δημοσίευση από tsiger » 07 Οκτ 2009 13:27

Ξερω γω ρε παιδια.. εμενα ακόμα sites πελατων έχουν επισκεψιμότητα με ie6 με ποσοστό 25 - 30%. Δε μπορω να τους αγνοησω.

Catalyst
Δημοσιεύσεις: 195
Εγγραφή: 06 Μαρ 2009 21:40

Κεντράρισμα ενός div καθέτως και οριζοντίως

Δημοσίευση από Catalyst » 07 Οκτ 2009 14:06

βρε παρτε το χαμπαρι ο ie6 και ο Μητσοτακη δεν θα πεθανουν ποτε :lol: :D

Άβαταρ μέλους
ThyClub
Honorary Member
Δημοσιεύσεις: 5312
Εγγραφή: 17 Νοέμ 2003 00:21
Τοποθεσία: Hell's Kitchen
Επικοινωνία:

Κεντράρισμα ενός div καθέτως και οριζοντίως

Δημοσίευση από ThyClub » 07 Οκτ 2009 15:57

Όσο οι επισκέπτες βλέπουν όμορφα σαιτ με ΙΕ6 τόσο ο ΙΕ θα είναι ζωντανός. ;)

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Κεντράρισμα ενός div καθέτως και οριζοντίως

Δημοσίευση από dimsis » 07 Οκτ 2009 16:04

10 χρόνια κλείνει ο IE6 σε λίγο, με το που θα βγουν τα 7 λογικά το 25-30% θα πέσει σε 2-3% και αυτοί ΑΝ θέλουν να σερφάρουν σωστά θα αναβαθμίσουν τον browser τους.
Καλά κάνεις πάντως αφού μιλάμε για τέτοια ποσοστά.

Στα backend μας παίρνει να τους λέμε ότι για να δουλέψει σωστά υπάρχουν κάποιες προδιαγραφές - απαιτήσεις, από τη στιγμή που δεν είναι για όλα τα μάτια. Στο frontend γίνετε ακόμα ένας έλεγχος από τους designers που κόβουν τα sites. Εγώ εδώ και 2-3 μήνες καλώς ή κακώς τον αγνοώ τον ΙΕ6.

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες