Gryzor Δημοσ. 24 Δεκεμβρίου 2008 Δημοσ. 24 Δεκεμβρίου 2008 Καλησπέρα και χρόνια πολλά σε όλους! Συνειδητοποίησα ότι έχω ξεχάσει ό,τι ήξερα και δεν ήξερα από CSS. Θα μπορούσε κάποιος να με βοηθήσει (υποθέστε ότι δεν ξέρω την τύφλα μου) με το να κεντράρω μία εικόνα σε μία ιστοσελίδα (οριζόντια και κάθετα, δεν υπάρχει κείμενο, και δεν είναι background εικόνα); Υποθέτω πως είναι εύκολο σχετικά με css, αλλά πώς ακριβώς; Ευχαριστώ εκ των προτέρων, και πολλές ευχές! Θέμης
PCharon Δημοσ. 24 Δεκεμβρίου 2008 Δημοσ. 24 Δεκεμβρίου 2008 Για δοκίμασε (αν είναι μόνη της στο body, βάλ'το στο body)... text-align:center;vertical-align:middle
Gryzor Δημοσ. 24 Δεκεμβρίου 2008 Μέλος Δημοσ. 24 Δεκεμβρίου 2008 Σ'ευχαριστώ για την (υπέρ-γρήγορη!) απάντησή σου. Όπως είπα, υποθέστε πως είμαι τελείως άσχετος. Μπορείς να δώσεις ένα παράδειγμα κώδικα με αυτό μέσα; Να πω ότι η σελίδ απεριέχει μόνο μία και μοναδική εικόνα... (ίσως περισσότερες, αλλά αν δυσκολεύει το κεντράρισμα θα το κάνω με image map)
PCharon Δημοσ. 24 Δεκεμβρίου 2008 Δημοσ. 24 Δεκεμβρίου 2008 Αν μιλάμε για μία εικόνα, δηλαδή ένα <img blaba>, τότε θα γράψεις το γράψεις κάπως έτσι > <html><head><title>Παράδειγμα</title></head> <body style="text-align:center;vertical-align:middle"> <img src="blabla" alt="κείμενο tooltip"> </body> </html>
Gryzor Δημοσ. 24 Δεκεμβρίου 2008 Μέλος Δημοσ. 24 Δεκεμβρίου 2008 Xμμμ το οριζόντιο δουλεύει, το κάθετο όμως όχι... Απ'ο,τι θυμάμαι το vertical align δεν δουλεύει με τον ίδιο τρόπο και αποτυγχάνει! Κάτι που μόλις διάβασα: the "verical-align" CSS property only works for inline blocks (e.g. images) and table cells. But you cannot use it for setting the vertical alignment of the text in a block container [...]
fromaz Δημοσ. 24 Δεκεμβρίου 2008 Δημοσ. 24 Δεκεμβρίου 2008 Δεν είναι πως ξέχασες ότι ξέρεις και δεν ξέρεις αγαπητέ Gryzor. Απλά κόλλησες σε ένα από τα μεγαλύτερα προβλήματα του css (2.1) layout: το vertical-alignment. Με tables γίνεται σε 10 seconds. Με css θέλει μαϊμουδιές. Δες ένα σχετικό αρθράκι. Προσωπικά δε συμφωνώ με τη λύση (θα το έκανα διαφορετικά), αλλά μπορεί να σε καλύψει ή να σου δώσει ιδέες για κάτι άλλο.
Gryzor Δημοσ. 24 Δεκεμβρίου 2008 Μέλος Δημοσ. 24 Δεκεμβρίου 2008 Φίλε Φρομαζ ("τιρί"; ), σ'ευχαριστώ... κι έσπαγα το κεφάλι μου διάολε!!! Ναι, με πίνακες είναι εύκολο και παίρνει κάπου 10", αλλά ήλπιζα να το κάνω πιο 'fancy'... Ευχαριστώ για το link. Θα το διαβάσω κι ελπίζω να βγάλω άκρη, αλλιώς τελικά... πίνακες και πάλι! -----Προστέθηκε 25/12/2008 στις 10 : 57 : 02----- Γρουμπφ.... Ό,τι και να κάνω, δεν δουλεύει σε όλους τους browsers. Έχω το εξής: ><html> <head> <style type="text/css"> .wraptocenter { display: table-cell; text-align: center; vertical-align: middle; width: 100%; height: 100%; } .wraptocenter * { vertical-align: middle; } /*\*//*/ .wraptocenter { display: block; } .wraptocenter span { display: inline-block; height: 100%; width: 1px; } /**/ </style> </head> <body> <table width="100%" height="100%"> <tr> <td> <div class="wraptocenter"><span></span><img src="img.png"></div> </td> </tr> </table> </body> </html> Aυτό δουλεύει σε IE(7) αλλά στην Opera, στον FF και στο Chrome κάνει την εικόνα halign αριστερά. Μπορώ να ορίσω στο .wraptocenter απόλυτες τιμές και δουλεύει και σε Opera κτλ, αλλά με τα αναμενόμενα προβλήματα. Άρα... τί στο καλό κάνω; Αν τουλάχιστον δούλευε ο FF θα μπορούσα να πω ότι πιάνω την συντριπτική πλειοψηφία...
Hazuki Δημοσ. 27 Δεκεμβρίου 2008 Δημοσ. 27 Δεκεμβρίου 2008 My 2 NooB cents #imgid { position: absolute; top: 45%; left: 45%; } ή γενικά ότι τιμές βλέπεις ότι σου κάνουν. Για εικόνα μόνη της, χωρίς table. n00b out
andrip Δημοσ. 29 Δεκεμβρίου 2008 Δημοσ. 29 Δεκεμβρίου 2008 vertical allignment δεν παίζει σε css κάνεις ένα div που διαβάζει πχ απο ένα class (ας το ονομάσουμε center) και θα είναι έτσι αν υποθέσουμε πχ οτι η φωτογραφία μας είναι 200χ200 >#center { width:200px; height:200px; margin:auto; } width και height μπορεί να δουλέψει και με auto αντί για συγκεκριμένες τιμές ουσιαστικά η επιλογή margin μας λέει πόση απόσταση θα έχει το div μας απο πάνω, κάτω, δεξιά και αριστερά. αν θέλαμε να την κεντράραμε μόνο οριζόντια θα γράφαμε margin: 0 auto; δηλαδή 0 κενό επάνω και κάτω, και αυτόματα δεξιά κι αριστερά και μετά θα γράφαμε στον κώδικά μας ><div class="center"> <img src="eikona.jpg"> </div> είμαι στη δουλειά και δε μπορώ να το δοκιμάσω τώρα αλλα μόλις πάω σπίτι θα το επιβεβαιώσω
Προτεινόμενες αναρτήσεις
Αρχειοθετημένο
Αυτό το θέμα έχει αρχειοθετηθεί και είναι κλειστό για περαιτέρω απαντήσεις.