Πριν είχαμε να αντιμετωπίσουμε με CSS για τη δημιουργία διατάξεις σελίδα μας, ευθυγραμμίζοντας κάποιο περιεχόμενο μέσα σε ένα κελί πίνακα φαίνεται το παιχνίδι μόνο του παιδιού. Απλά ρυθμίστε το "ευθυγραμμίσει" ή "valign" κτήμα του πίνακα να έχουν την ευθυγράμμιση της επιλογής σας, κομμάτι κέικ!
Με CSS διατάξεις, αν και έχουμε "κάθετη-align" ιδιοκτησίας για τα στοιχεία, δεν φαίνεται να είναι τόσο απλή όσο την "ευθυγράμμιση" ή "valign" ιδιότητες. Για να γίνω πιο specifiic η "κάθετη ευθυγράμμιση," δεν φαίνεται ποτέ να λύσει κανένα από τα προβλήματά σας, ειδικά αν γράψω ένα κομμάτι της πολλαπλής CSS πλοηγός.
Χωρίς τη χρήση της HTML πίνακες, Το πρόβλημα της κεντραρίσματος στο αντικείμενο, είτε πρόκειται για μια εικόνα ή ένα κείμενο μέσα σε ένα τμήμα που περιέχει, έχει πιθανώς κάθε UI / CSS εφιάλτης προγραμματιστές σε κάποιο σημείο. Το πρόβλημα αυτό προεκτείνει περαιτέρω τις ανησυχίες σας για την ευθυγράμμιση, αν το αντικείμενο πρέπει να είναι δυναμική επικεντρώνεται στο χαρακτήρα, δηλαδή όταν το ύψος του είναι μεταβλητή (άγνωστο ύψος).
Αν και δεν υπάρχει καμία γνωστή ευθεία λύση που θα μπορούσε να λειτουργήσει σε όλο το φάσμα των browsers που έχουμε να αντιμετωπίσουμε, η λύση που έχω προσπαθήσει να καταλήξει σε φαίνεται να λειτουργεί σε λίγες προγράμματα περιήγησης που έχω δοκιμάσει στο (IE6, IE 7 , FF).
ΛΥΣΗ:
Σε browsers όπως Mozilla, Opera και Safari, Η παράξενη συμπεριφορά "κάθετη-align" ιδιοκτησία μπορεί να φέρει στα συγκαλά του, ρυθμίζοντας απλώς το "οθόνη" ιδιοκτησία της διαίρεσης να περιέχουν "πίνακα στοιχείων" (display: table-cell) .
Το πρόβλημα παραμένει με την οικογένειά του IE browser, ο οποίος, όμως δεν φαίνεται να κατανοούν τι πρέπει να με "πίνακα στοιχείων" ιδιοκτησίας και αδαείς ως έχουν, αγνοούν ακριβώς. Η λύση που δόθηκε συνέχεια, αν και απλή, λίγες διαφημίσεις πιο DOM στοιχεία σε μορφή HTML σας για να κάνετε τα πράγματα να συμβούν.
Η CSS και HTML μοιάζει με αυτό
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}
HTML: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> <BR/> Η θέα: 3456 </ p>
</ Span>
</ Span>
Το αποτέλεσμα μοιάζει με αυτό: -
δείτε το demo εδώ | Λήψη Αρχείων Πηγή (Κατεβασμένο 452 φορές)
Κατανοώντας τη λύση: Για τους browsers που καταλαβαίνουν απεικόνιση: τραπέζι και απεικόνιση: table-cell ιδιότητες, σπάνια χρειάζεται καμία εξήγηση. Για την Ιρλανδία, με τη χρήση ενός ειδικά IE hack (hash hack), να τοποθετήσετε το δοχείο απόλυτα αντικείμενο (obj_container) στα μισά από τα διαθέσιμα ύψους. Στη συνέχεια, αντικείμενο (obj) είναι η θέση μέσα σε σχετικά και κινείται πάνω από το ήμισυ του ύψους της ... Καλά! Μου φαίνεται να κατανοούν το βλέμμα του στο πρόσωπό σας, αλλά λειτουργεί. Δοκιμάστε το! Οι παραπάνω τεχνικές συνδυάζονται για να μας δώσει την παραπάνω λύση σταυρό του προγράμματος περιήγησης.
Η CSS μπορεί εύκολα να τροποποιηθεί ως εξής για την επίτευξη, κάθετη-align: κορυφή ή κάθετη-align: κάτω TOP Ευθυγράμμιση CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}
HTML: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> <BR/> Η θέα: 1234 </ p>
</ Span>
</ Span>
Το αποτέλεσμα μοιάζει με αυτό: -
ΚΑΤΩ Ευθυγράμμιση CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> <BR/> Η θέα: 1234 </ p>
</ Span>
</ Span>
Το αποτέλεσμα μοιάζει με αυτό: -
δείτε το demo εδώ | Κατεβάστε εδώ
Οριζόντια κεντράρισμα του αντικειμένου επιτευχθεί απλώς με την ιδιότητα του περιθωρίου κέρδους, με τον καθορισμό του περιθωρίου-αριστερά και το δεξιά περιθώριο για αυτόματη Φαίνεται σαν αιώνες, από τότε που προσπαθούν να βρουν μια λογική λύση σε αυτό το πρόβλημα της ευθυγράμμισης. Αλλά τώρα με τη λύση αυτή, αισθάνομαι λίγο ειρήνη.
Με την ελπίδα ότι κάποια μέρα
- κατακόρυφη ευθυγράμμιση ιδιοκτησία των CSS θα λειτουργήσει όπως το κάνει μέσα σε ένα κελί πίνακα, χωρίς να χρειάζεται να κερδίσει πολλά γύρω από το θάμνο
- Τουλάχιστον, ο καθορισμός margin-top: αυτόματη και περιθώριο-κάτω: auto, θα δώσει το ίδιο αποτέλεσμα όπως με περιθώριο αριστερά και το δεξιά περιθώριο σετ με αυτόματη
- Οι πόλεμοι Browser θα είναι πάνω από κάποια μέρα.
- Εκεί ακριβώς θα ένα πρόγραμμα περιήγησης για όλους.
Κατεβάστε το CSS και HTML από την παραπάνω λύση εδώ (Κατεβασμένο 452 φορές) .. για την κατανόηση, το CSS δεν έχουν βελτιστοποιηθεί
PS: Και από τον τρόπο, αυτά είναι μικρογραφίες του μερικές φωτογραφίες που έχω επιλέξει ... 
