div στο κέντρο της οθόνης

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

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

Απάντηση
Άβαταρ μέλους
Khronos
Δημοσιεύσεις: 754
Εγγραφή: 11 Δεκ 2006 14:43
Τοποθεσία: Ηράκλειο

div στο κέντρο της οθόνης

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

Πώς μπορώ να τοποθετήσω ένα div στο κέντρο της οθόνης με css? Και vertical και horizontal alignment.

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

div στο κέντρο της οθόνης

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

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

<style type="text/css">
html, body &#123;
	height&#58; 100%;
&#125;

#centeredcontent &#123;
	width&#58; 100px;
	height&#58; 100px;
	text-align&#58; center;
	border&#58; 1px solid #000;
	background-color&#58; red;
	color&#58; #fff;
	position&#58; absolute;
	left&#58; 50%;
	top&#58; 50%;
	margin-left&#58; -50px; 
	/* Half the width of the DIV tag which is 50 pixels */
	margin-top&#58; -50px; 
	/* Half the height of the DIV tag which is also 50 pixels */
&#125;
</style>
http://www.joe2torials.com/view_tutorial.php?view=37

demo: http://www.joe2torials.com/css/examples ... ample.html

Σε γενικές γραμμές για να κεντράρεις οριζοντίως ένα margin:0 auto είναι αρκετό, αλλά για να κεντράρεις καθέτως θέλεις να έχεις βάλει στο body και html το height 100%

Άβαταρ μέλους
Khronos
Δημοσιεύσεις: 754
Εγγραφή: 11 Δεκ 2006 14:43
Τοποθεσία: Ηράκλειο

div στο κέντρο της οθόνης

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

Ευχαριστω. Εμφανίζεται ομως στο πλαι η μπάρα. Πώς γίνεται να μην εμφανίζεται?

Άβαταρ μέλους
cordis
Administrator, [F|H]ounder, [C|S]EO
Δημοσιεύσεις: 27640
Εγγραφή: 09 Οκτ 1999 03:00
Τοποθεσία: Greece
Επικοινωνία:

div στο κέντρο της οθόνης

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

η απάντηση πήγε εδώ:
http://www.freestuff.gr/forums/viewtopi ... 502#430502
Δεν απαντάω σε προσωπικά μηνύματα με ερωτήσεις που καλύπτονται από τις ενότητες του forum. Για ο,τι άλλο είμαι εδώ για εσάς.
- follow me @twitter

Άβαταρ μέλους
Khronos
Δημοσιεύσεις: 754
Εγγραφή: 11 Δεκ 2006 14:43
Τοποθεσία: Ηράκλειο

div στο κέντρο της οθόνης

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

Very nice! Ευχαριστώ!

Απάντηση

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

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

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