SpyrosR Δημοσ. 24 Απριλίου 2009 Δημοσ. 24 Απριλίου 2009 Καλησπέρα. Μέσα σ' ένα division έχω 12 εικόνες, "χύμα". Αυτό που θέλω να πετύχω όμως, είναι να είναι "στοιχισμένες" στο κέντρο του division, χωρίς φυσικά τη βοήθεια πίνακα. Προφανώς το margin-left και margin-right σε auto δε λειτουργούν, αφού μιλάμε για περισσότερα του ενός elements. Έχουμε καμιά ιδέα; Ο κώδικάς μου είναι: CSS >#gallery { width: 600px; min-height: 500px; margin: 50px auto 50px auto; background-color: #FFFFFF; } #gallery img { border: 4px #BFBFBF solid; } #gallery img:hover { border: 4px #222222 solid; } HTML ><div id="gallery"> <img src="./gallery/img/09042101s.jpg" alt="09042101s" /> <img src="./gallery/img/09042101s.jpg" alt="09042101s" /> <img src="./gallery/img/09042101s.jpg" alt="09042101s" /> <img src="./gallery/img/09042101s.jpg" alt="09042101s" /> <img src="./gallery/img/09042101s.jpg" alt="09042101s" /> <img src="./gallery/img/09042101s.jpg" alt="09042101s" /> <img src="./gallery/img/09042101s.jpg" alt="09042101s" /> <img src="./gallery/img/09042101s.jpg" alt="09042101s" /> <img src="./gallery/img/09042101s.jpg" alt="09042101s" /> <img src="./gallery/img/09042101s.jpg" alt="09042101s" /> <img src="./gallery/img/09042101s.jpg" alt="09042101s" /> <img src="./gallery/img/09042101s.jpg" alt="09042101s" /> </div> Το τώρα αποτέλεσμα είναι αυτό:
StavrosD Δημοσ. 24 Απριλίου 2009 Δημοσ. 24 Απριλίου 2009 Στο gallery, έχεις δοκιμάσει text-align:center;
PCharon Δημοσ. 24 Απριλίου 2009 Δημοσ. 24 Απριλίου 2009 Έχουμε καμιά ιδέα; Πολύ απλό, βάζεις το <div id="gallery">(μπλαμπλα)</div> μέσα σε αυτό ><div style="text-align:center"></div> (το text-align όχι στο gallery, αλλά στο div περιέκτη αυτού)
SpyrosR Δημοσ. 24 Απριλίου 2009 Μέλος Δημοσ. 24 Απριλίου 2009 ...έχω κατεβάσει 3 φραπέδες από νωρίς το απόγευμα ψάχνοντας, το text-align: center; ήταν το μόνο που δεν έκανα. Ήμαρτον. Άμα το μυαλό κολλήσει... Χίλια ευχαριστώ. Θα καιγόμουν δυο μέρες ακόμα μέχρι να μου 'ρχόταν φλασιά τη Δευτέρα το πρωί στο λεωφορείο. >#gallery { width: 600px; min-height: 500px; margin: 50px auto 50px auto; background-color: #FFFFFF; text-align: center; }
PCharon Δημοσ. 24 Απριλίου 2009 Δημοσ. 24 Απριλίου 2009 Εκεί που το έβαλες το text-align δεν θα δουλέψει, τουλάχιστον στον κώδικα που έδωσες (δοκίμασέ το μόνο του σε ένα html και κάνε μεγιστοποίηση του φυλλομετρητή να δεις τι εννοώ). Εκτός αν στον κώδικα της σελίδας είναι διαφορετικά τα πράγματα.
SpyrosR Δημοσ. 24 Απριλίου 2009 Μέλος Δημοσ. 24 Απριλίου 2009 Υποθέτω ότι εννοείς πως θα "απλώσει" αν τρέξω maximized; Το division έχει fixed width, οπότε δεν είναι πρόβλημα αυτό. Και σε άδεια σελίδα καινούρια που το δοκίμασα (πάλι fixed width) δε μου έβγαλε κάτι περίεργο. Εκτός κι αν λες κάτι άλλο.
PCharon Δημοσ. 24 Απριλίου 2009 Δημοσ. 24 Απριλίου 2009 Εκτός κι αν λες κάτι άλλο. Ναι, λέω πως αν το βάλεις έτσι θα συμβαίνει αυτό (γράψε το σε ένα html και δες): ><html><head><title>test</title> <style type="text/css"> #gallery { width: 600px; min-height: 500px; margin: 50px auto 50px auto; background-color: #FFFFFF; text-align:center} #gallery img { border: 4px #BFBFBF solid;} #gallery img:hover { border: 4px #222222 solid;} </style> </head> <body> <div id="gallery"> <img src="./gallery/img/09042101s.jpg" alt="09042101s" /> <img src="./gallery/img/09042101s.jpg" alt="09042101s" /> <img src="./gallery/img/09042101s.jpg" alt="09042101s" /> <img src="./gallery/img/09042101s.jpg" alt="09042101s" /> <img src="./gallery/img/09042101s.jpg" alt="09042101s" /> <img src="./gallery/img/09042101s.jpg" alt="09042101s" /> <img src="./gallery/img/09042101s.jpg" alt="09042101s" /> <img src="./gallery/img/09042101s.jpg" alt="09042101s" /> <img src="./gallery/img/09042101s.jpg" alt="09042101s" /> <img src="./gallery/img/09042101s.jpg" alt="09042101s" /> <img src="./gallery/img/09042101s.jpg" alt="09042101s" /> <img src="./gallery/img/09042101s.jpg" alt="09042101s" /> </div> </body> </html> ...αλλά μάλλον εσύ ήθελες το κεντράρισμα εντός του gallery και δεν σε ενδιαφέρει τί γίνεται έξω από αυτό.
SpyrosR Δημοσ. 25 Απριλίου 2009 Μέλος Δημοσ. 25 Απριλίου 2009 Ίσως φταίει ότι είναι βράδυ... αλλά και πάλι δε βρίσκω πρόβλημα. Αυτό ακριβώς που γράψαμε δε βγάζει;
PCharon Δημοσ. 25 Απριλίου 2009 Δημοσ. 25 Απριλίου 2009 Σε ΙΕ δοκίμασες? (εγώ στον 6 το άνοιξα και δεν το δείχνει έτσι) (* ίσως να μην έχεις Windows, τώρα το είδα, αλλά φαντάζομαι σε ενδιαφέρει να δείχνει η σελίδα σωστά παντού)
Seldimi Δημοσ. 25 Απριλίου 2009 Δημοσ. 25 Απριλίου 2009 Επειδή ο IE δεν τα πάει καλά με τα text-aligns.. κάνε το εξής... >dasdda <style type="text/css"> div#big { text-align: center; } #gallery { border:1px solid; width: 600px; min-height: 500px; margin-left: auto ; margin-right: auto ; background-color: #FFFFFF; text-align:center; } #gallery img { border: 4px #BFBFBF solid;} #gallery img:hover { border: 4px #222222 solid;} </style> </head> <body> <div id="big"> <div id="gallery"> <img src="./gallery/img/09042101s.jpg" alt="09042101s" /> <img src="./gallery/img/09042101s.jpg" alt="09042101s" /> <img src="./gallery/img/09042101s.jpg" alt="09042101s" /> <img src="./gallery/img/09042101s.jpg" alt="09042101s" /> <img src="./gallery/img/09042101s.jpg" alt="09042101s" /> <img src="./gallery/img/09042101s.jpg" alt="09042101s" /> <img src="./gallery/img/09042101s.jpg" alt="09042101s" /> <img src="./gallery/img/09042101s.jpg" alt="09042101s" /> <img src="./gallery/img/09042101s.jpg" alt="09042101s" /> <img src="./gallery/img/09042101s.jpg" alt="09042101s" /> <img src="./gallery/img/09042101s.jpg" alt="09042101s" /> <img src="./gallery/img/09042101s.jpg" alt="09042101s" /> </div> </div> Παίζει ρόλο η κληρονομικότητα του text-align από το parent στο child για να παίξει στον ΙΕ
PCharon Δημοσ. 25 Απριλίου 2009 Δημοσ. 25 Απριλίου 2009 Επειδή ο IE δεν τα πάει καλά με τα text-aligns.. κάνε το εξής...Παίζει ρόλο η κληρονομικότητα του text-align από το parent στο child για να παίξει στον ΙΕ Κάπως έτσι! Βασικά παίζει να έχει να κάνει με τον τρόπο που κάνει align στα divisions ο ΙΕ, αλλά τέλος πάντων αυτό πρέπει να κάνεις για να παίζει παντού το ίδιο. (γι αυτό έσκουζα τόση ώρα )
Προτεινόμενες αναρτήσεις
Αρχειοθετημένο
Αυτό το θέμα έχει αρχειοθετηθεί και είναι κλειστό για περαιτέρω απαντήσεις.