Ausdruck ihrer IT-

Bevor wir uns mit CSS zu tun, um unsere Seiten-Layouts zu erstellen, richten einige Inhalte in einer Tabellenzelle hatte schien nur ein Kinderspiel. Setzen Sie einfach das "align" oder "valign"-Eigenschaft der Tabelle, um die Ausrichtung Ihrer Wahl, Stück Kuchen haben!
Mit CSS-Layouts, aber wir haben "vertical-align"-Eigenschaft für die Elemente, scheint es nicht so einfach wie das "align" oder "valign" Eigenschaften sein. Um genauer zu sein specifiic die "vertical-align" scheint nie zu irgendwelchen Ihre Probleme zu lösen, vor allem, wenn sich ein Stück von Cross-Browser CSS zu schreiben.

Ohne den Einsatz von HTML-Tabellen, DAS PROBLEM DER Zentrierung auf Objekt, das ein Bild oder ein Text in einem haltigen Division, hat wahrscheinlich schon jeder UI / CSS Entwickler Alptraum an einem gewissen Punkt zu sein. Dieses Problem weiter extrapoliert Ihre Sorgen auszurichten, wenn das Objekt zu zentrieren ist in der Natur dynamisch, dh, wenn seine Höhe ist variabel (unbekannte Höhe).

Zwar gibt es keine bekannte Lösung, die gerade nach vorne über den Bereich der Browser haben wir zu tun haben will arbeiten, scheint die Lösung, dass ich versucht habe, bei ankommen tut, um in den wenigen Browsern, ich habe es versucht, in Arbeit (IE6, IE 7 , FF).

LÖSUNG:
In Browsern wie Mozilla, Opera und Safari, Der seltsame Verhalten "vertical-align"-Eigenschaft kann zur Vernunft gebracht werden, einfach indem Sie die "Display"-Eigenschaft des übergeordneten Division auf "table-cell" (display: table-cell) .

Das Problem bleibt trotzdem mit dem IE-Browser-Familie, die, noch scheinen nicht, was mit dem "table-cell"-Eigenschaft und unwissend zu verstehen, wie sie, sie ignorieren es einfach sind. Die Lösung unten, wenn auch einfach, ein paar Anzeigen mehr von DOM-Elementen, um Ihre HTML, die Dinge passieren gegeben.

Die CSS-und HTML sieht wie folgt aus
.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/> Aufrufe: 3456 </ div>
</ Div>
</ Div>

Das Ergebnis sieht wie folgt aus: -

Demo ansehen hier | Quellcode-Dateien (450 mal heruntergeladen)

---

Das Verständnis der Lösung:
Für die Browser, die Anzeige zu verstehen: Tisch und display: table-cell Eigenschaften, es selten braucht keine Erklärung. Für IE, mit dem Einsatz ein IE-spezifischen Hack (Hash-Hack), wir absolut positionieren das Objekt Behälter (obj_container) in der Hälfte des zur Verfügung stehenden Höhe. Dann Objekt (obj) ist in Position relativ und wird von halber Höhe bewegt ... Naja! Ich scheine das Aussehen der auf Ihrem Gesicht zu verstehen, aber es funktioniert. Versuchen Sie es!
Die oben genannten Techniken werden kombiniert, um uns die oben genannten Cross-Browser-Lösung.

---

Die CSS kann leicht geändert werden, wie unten zu erreichen, vertical-align: top oder vertical-align: bottom

Oben ausrichten 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/> Ansichten: 1234 </ div>
</ Div>
</ Div>

Das Ergebnis sieht wie folgt aus: -

Unten ausrichten 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/> Ansichten: 1234 </ div>
</ Div>
</ Div>

Das Ergebnis sieht wie folgt aus: -

hier sehen Sie die Demo | Download hier

---

Horizontale Zentrierung des Objekt einfach mit der Margin-Eigenschaft erreicht, indem die margin-left und margin-right auf auto

Scheint, wie Alter, da ich versucht habe, eine angemessene Lösung für dieses Problem Ausrichtung zu finden. Aber jetzt mit dieser Lösung, fühle ich mich an etwas Ruhe.

Mit einer Hoffnung, dass eines Tages

• Vertikal-Alignment-Eigenschaft in CSS wird, wie sie aussieht in einer Tabellenzelle arbeiten, ohne sich viel um den heißen Brei
• Zumindest die Einstellung margin-top: auto und margin-bottom: auto, wird als das gleiche Ergebnis wie mit margin-left und margin-right auf auto-Set geben
• Die Browser-Kriege wird über einige Tage sein.
• Es wird dann lediglich ein Browser für alle.

Laden Sie die CSS-und HTML der obigen Lösung hier (Downloaded 450 times) .. für Verständlichkeit, die CSS wird nicht optimiert

PS: Und übrigens, das sind die Miniaturen von einigen Bildern habe ich geklickt ...