Zanim mieliśmy do czynienia z CSS do tworzenia naszych układów stron, ustawiając pewne treści wewnątrz komórki tabeli wydawała się dziecinnie prosta. Wystarczy ustawić "align" lub "valign" własność tabeli, aby mieć wyrównanie do wyboru, bułka z masłem!
Z układów CSS, choć mamy "vertical-align" własności dla elementów, nie wydaje się być tak proste jak "align" lub "valign" właściwości. Aby być bardziej konkretną "vertical-align" nigdy się nie rozwiąże żadnego z problemów, zwłaszcza jeśli są napisać kawałek cross-browser CSS.
Bez użycia tabel HTML, PROBLEM centrowania na obiekcie, czy to obraz lub fragment tekstu wewnątrz zawierających podział, był prawdopodobnie każdy UI / CSS koszmar deweloperzy w pewnym momencie. Ten problem dalej ekstrapoluje swoje obawy z dostosowania, jeśli obiekt się koncentrować jest dynamiczny charakter, tzn. gdy jego wysokość jest zmienna (nieznane wysokość).
Choć nie ma znany proste rozwiązanie, które będzie działać w całej gamie przeglądarek mamy do czynienia, rozwiązanie, które starałem się dotrzeć nie wydają się działać w kilku przeglądarkach, że próbowali go (IE6, IE 7 , FF).
ROZWIĄZANIE:
W przeglądarkach takich jak Mozilla, Opera i Safari, dziwnie zachowujących się "vertical-align" nieruchomość może być wniesiona do swoich zmysłów, poprzez ustawienie "display" własność zawierających podział na "table-cell" (display: table-cell) .
Problemem pozostaje z IE rodziny przeglądarek, którzy jeszcze nie wydają się zrozumieć, co do z "table-cell" nieruchomości i nieświadomych, ponieważ są one po prostu zignorować. Rozwiązanie podane poniżej, choć proste, reklamy kilku elementów do kodu HTML do zdziała więcej DOM.
CSS i HTML wygląda tak
.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/> widoki: 3456 </ div>
</ Div>
</ Div>
Wynik wygląda tak: -
Obejrzyj demo tutaj | DLA Pobieranie plików źródłowych (pobrany 452 razy)
Zrozumienie rozwiązanie: Dla przeglądarek, które rozumieją display: table i display: table-cell właściwości, rzadko wymaga żadnych wyjaśnień. Dla IE, z użyciem IE specyficzny Hack (hash siekać), to absolutnie umieścić pojemnik obiekty obj_container) w połowie dostępnej wysokości. Następnie obiekt (obj) w to miejsce stosunkowo i jest przesuwany w górę o połowę jego wysokości ... No! Wydaje mi się zrozumieć wygląd na twarzy, ale działa. Spróbuj! Powyższe techniki są łączone, aby dać nam powyższy krzyż rozwiązanie przeglądarki.
CSS mogą być łatwo modyfikowane jak poniżej w celu osiągnięcia, vertical-align: top lub vertical-align: bottom TOP Wyrównaj 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/> widoki: 1234 </ div>
</ Div>
</ Div>
Wynik wygląda tak: -
Bottom Wyrównuje 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/> widoki: 1234 </ div>
</ Div>
</ Div>
Wynik wygląda tak: -
Obejrzyj demo tutaj | Pobierz tutaj
Poziome wyśrodkowanie obiektu po prostu osiągnąć z nieruchomości marży, poprzez ustawienie margin-left i margin-right na auto Wygląda na wieki, ponieważ starałem się znaleźć rozsądne rozwiązanie tego problemu wyrównania. Ale teraz z tego rozwiązania, czuję się jak w małym pokoju.
Z nadzieją, że kiedyś
- pionowe wyrównanie własności w CSS będzie działać tak jak to robi wewnątrz komórki tabeli, bez konieczności pokonać wiele w bawełnę
- Przynajmniej, ustawienie margin-top: auto i margin-bottom: auto, da się taki sam wynik jak z margin-left i margin-right ustawione na auto
- Wojny przeglądarek będzie się pewnego dnia.
- Nie będzie tylko jednym z przeglądarką dla ALL.
Pobierz CSS i HTML w powyższy sposób roztwór tutaj (pobrany 452 razy) .. dla zrozumiałości, CSS nie jest zoptymalizowana
PS: A swoją drogą, to są miniaturki niektórych zdjęciach mam kliknęli ... 
