css center div

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

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

Απάντηση
idiot
Δημοσιεύσεις: 89
Εγγραφή: 22 Οκτ 2003 23:22
Τοποθεσία: Κάπου εκεί!

css center div

Δημοσίευση από idiot » 16 Οκτ 2005 22:44

pws mporw na kentrarw orizontia ena div(to opoio periexei alla divs mesa)
to opoio exei width:550px ?
(prwti tableless prospatheia :oops: )

thnx

Άβαταρ μέλους
goofakos
Δημοσιεύσεις: 494
Εγγραφή: 18 Απρ 2005 00:05
Τοποθεσία: Somewhere between that riff and the other one.

css center div

Δημοσίευση από goofakos » 16 Οκτ 2005 23:42

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

<div align="center">

idiot
Δημοσιεύσεις: 89
Εγγραφή: 22 Οκτ 2003 23:22
Τοποθεσία: Κάπου εκεί!

css center div

Δημοσίευση από idiot » 16 Οκτ 2005 23:57

goofakos έγραψε:

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

<div align="center">
r u sure my friend?:S

sibas
Honorary Member
Δημοσιεύσεις: 1851
Εγγραφή: 21 Φεβ 2003 01:21
Τοποθεσία: Μια εδώ.. Μια εκεί.. Σήμερα είμαι εδώ!!!
Επικοινωνία:

css center div

Δημοσίευση από sibas » 17 Οκτ 2005 01:00

Δοκίμασε το παρακάτω

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
			"http&#58;//www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title></title>
<style>

body &#123; padding&#58;0; margin&#58;0&#125;
#content &#123; margin&#58;auto; width&#58;550px; border&#58;solid #000000; border-width&#58; 1px&#125;
#polladiv&#123; text-align&#58;center;color&#58;#808000 &#125;

</style>
</head>
<body>

<div id="content">
   <div id="polladiv">hello css</div>
</div>

</body>
</html>

πρέπει να προσέξεις το DOCTYPE, και για να κεντράρεις το div βάζεις margin auto

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

css center div

Δημοσίευση από skeftomilos » 17 Οκτ 2005 03:23

Αν το ίδιο το div βρίσκεται μέσα σε άλλο div, τότε μπορείς να ορίσεις text-align:center στο έξω div. Αυτό έχει μια παρενέργεια, ότι θα κεντραριστούν και τα περιεχόμενα του div. Αν αυτό είναι ανεπιθύμητο, πρέπει να δωθεί και text-align:left στο ίδιο το div.

Μια άλλη ιδέα με absolute position είναι να γίνει 50% το left και να δωθεί αρνητικό margin-left στο μισό του πλάτους:

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

&#123;
  position&#58;absolute;
  width&#58;550px;
  left&#58;50%;
  margin-left&#58;-275px;
&#125;
Το attribute align="center" που είπε ο goofakos δουλεύει με λίγα μόνο tags, κυρίως με <table>.

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

<table align="center">
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

idiot
Δημοσιεύσεις: 89
Εγγραφή: 22 Οκτ 2003 23:22
Τοποθεσία: Κάπου εκεί!

css center div

Δημοσίευση από idiot » 17 Οκτ 2005 11:34

Μια άλλη ιδέα με absolute position είναι να γίνει 50% το left και να δωθεί αρνητικό margin-left στο μισό του πλάτους:

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

&#123;
  position&#58;absolute;
  width&#58;550px;
  left&#58;50%;
  margin-left&#58;-275px;
&#125;
nai omos den einai analoga me tin analisi tis othonis?an den kanw lathos...

idiot
Δημοσιεύσεις: 89
Εγγραφή: 22 Οκτ 2003 23:22
Τοποθεσία: Κάπου εκεί!

css center div

Δημοσίευση από idiot » 17 Οκτ 2005 13:00

skeftomilos έγραψε:Αν το ίδιο το div βρίσκεται μέσα σε άλλο div, τότε μπορείς να ορίσεις text-align:center στο έξω div. Αυτό έχει μια παρενέργεια, ότι θα κεντραριστούν και τα περιεχόμενα του div. Αν αυτό είναι ανεπιθύμητο, πρέπει να δωθεί και text-align:left στο ίδιο το div.

Μια άλλη ιδέα με absolute position είναι να γίνει 50% το left και να δωθεί αρνητικό margin-left στο μισό του πλάτους:

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

&#123;
  position&#58;absolute;
  width&#58;550px;
  left&#58;50%;
  margin-left&#58;-275px;
&#125;

Το attribute align="center" που είπε ο goofakos δουλεύει με λίγα μόνο tags, κυρίως με <table>.

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

<table align="center">
telika evala akoma ena ekswteriko div to opoio eixe text-align:center
thnx :)

edit: den pianei ston firefoxa :S

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

css center div

Δημοσίευση από cherouvim » 17 Οκτ 2005 14:35

margin: 0 auto;

kai gia kapoia bad browsers tha prepei na valeis to parent element ena text-align: center

den sinisto ton tropo me absolute position kai arnitiko margin mias kai dimiourgei sovarotata probs se old/bad browsers

kai (plz) prospathise na apofygeis pragmata tou styl: align="center" mesa sto html sou.

idiot
Δημοσιεύσεις: 89
Εγγραφή: 22 Οκτ 2003 23:22
Τοποθεσία: Κάπου εκεί!

css center div

Δημοσίευση από idiot » 17 Οκτ 2005 15:16

cherouvim έγραψε:margin: 0 auto;

kai gia kapoia bad browsers tha prepei na valeis to parent element ena text-align: center

den sinisto ton tropo me absolute position kai arnitiko margin mias kai dimiourgei sovarotata probs se old/bad browsers

kai (plz) prospathise na apofygeis pragmata tou styl: align="center" mesa sto html sou.
thnx man ;)

pantws eimai xaroumenos pou epeitelous ekatsa ligo na asxolithw...giati alles fores molis kollousa se kati ta paratousa apo ta nevra mou :D

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

css center div

Δημοσίευση από skeftomilos » 18 Οκτ 2005 02:54

margin: 0 auto; σημαίνει 0 pixels πάνω-κάτω και auto αριστερά-δεξιά. Αφού και τα δύο είναι auto η διαφορά μοιράζεται με αποτέλεσμα το αριστερό margin να είναι ίσο με το δεξί.

Μπορούν να δωθούν από ένα ως τέσσερα ορίσματα στο margin:

margin: 10px; σημαίνει 10 pixels γύρω-γύρω.
margin: 10px 20%; σημαίνει 10 pixels πάνω-κάτω και 20 τοις εκατό αριστερά-δεξιά.
margin: 10px 50px 20px; σημαίνει 10 pixels πάνω, 50 αριστερά-δεξιά και 20 κάτω.
margin: 10px 50px 20px 0px; σημαίνει 10 pixels πάνω, 50 δεξιά, 20 κάτω και 0 αριστερά.

Δηλαδή πάει όπως η φορά του ρολογιού, ξεκινώντας από πάνω.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
xmavidis
Honorary Member
Δημοσιεύσεις: 1217
Εγγραφή: 02 Δεκ 2003 19:59
Τοποθεσία: Ηράκλειο

css center div

Δημοσίευση από xmavidis » 20 Οκτ 2005 00:58

Βάλε:
margin: 0 auto;
στο div που θέλεις να κεντράρεις
I want to know God’s thoughts; the rest are details.
Albert Einstein

Απάντηση

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

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

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