CSS vertical-align

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

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

Απάντηση
alasondro
Δημοσιεύσεις: 18
Εγγραφή: 07 Ιαν 2005 01:02

CSS vertical-align

Δημοσίευση από alasondro » 28 Ιούλ 2005 23:15

Έχω τον εξής κώδικα

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

<body>

	<div id="header">
		<img class="valign" src="style/img/tpointer.gif" />
	</div>
	
</body>
και το css του

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

#header &#123;
     	 background-image  &#58; url&#40;"style/img/header.gif"&#41;;
     	 background-repeat &#58; no-repeat;     	 
     	 width		   &#58; 217px;
     	 height		   &#58; 25px;
	 font		     &#58; 9px Verdana,Arial,Helvetica,Sans-Serif;       	 
	 display           &#58; block;
	
&#125; 

img.valign &#123;
	vertical-align &#58; middle;
&#125;
η εικόνα όμως μέσα στο div αρνειται πεισματικά να ευθυγραμιστεί στην μέση.Κάνω κάτι λάθος ;
Εχεις κανεί ιδέα πως μπορεί αυτό να υλοποιηθεί χωρίς όμως να χρησιμοποιήσουμε table αλλά μόνο με css;

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

CSS vertical-align

Δημοσίευση από cherouvim » 29 Ιούλ 2005 08:15

Εάν τα height του image και του container του ειναι γνωστά τότε παίξε με το margin-top του image.

Cmg__
Δημοσιεύσεις: 1710
Εγγραφή: 29 Μαρ 2005 22:40

CSS vertical-align

Δημοσίευση από Cmg__ » 29 Ιούλ 2005 13:38

kai giati den kaneis ena aplo align=center ?

Άβαταρ μέλους
RADICAL
Δημοσιεύσεις: 386
Εγγραφή: 14 Ιούλ 2004 01:07
Τοποθεσία: Athens
Επικοινωνία:

CSS vertical-align

Δημοσίευση από RADICAL » 29 Ιούλ 2005 14:27

Cmg__ έγραψε:kai giati den kaneis ena aplo align=center ?
Δεν θέλει align θέλει vertical align.

Στα <div> δυστυχώς δεν μπορεί να χρησιμοποιηθεί το vertical-align.
Λειτουργεί μόνο με inline elements και όχι box elements όπως είναι το <div>
Δηλαδή μπορεί να δουλέψει μόνο με τα στοιχεία που είναι πρίν και μετά απο αυτό και όχι με τα parent element που είναι το division.

Οπότε η θα χρησιμοποιήσεις <td>, η θα παίξεις με τo padding όπως είπε και ο cherouvim.

Δοκίμασε επίσης και αυτό αλλα δεν ξέρω αν είναι crossbrowser:

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

img.valign
&#123;

height&#58;100%;

width&#58;0px;

vertical-align&#58;middle;
&#125;

<div style='height&#58;500px'>

Vertically aligned content <img class="valign" />

</div>
Εικόνα

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

CSS vertical-align

Δημοσίευση από skeftomilos » 31 Ιούλ 2005 08:41

Το vertical-align δυστυχώς είναι απάτη (RADICAL speaking!).

- Vertical centering using CSS

Άμα διαβάσεις όλους τους διαφορετικούς τρόπους που έχουν εφευρεθεί για να γίνει αυτό το απλό πράγμα που θέλεις, μάλλον θα επιστρέψεις τρέχοντας στη λύση table. Εγώ πάντως αυτό ακριβώς έκανα! :)
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Απάντηση

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

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

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