Ennen meidän piti käsitellä CSS luomme sivun asetteluja kohdistamalla joitakin sisällön sisällä taulukon solun tuntui vain lastenleikkiä. Aseta vain "align" tai "valign" ominaisuuden taulukon on linjaus, valinnan, pala kakkua!
CSS ulkoasuja, vaikka meillä on "vertical-align" omaisuutta elementtejä, se ei näytä olevan yhtä yksinkertaista kuin "align" tai "valign" ominaisuuksia. Ollakseen specifiic "vertical-align" ei tunnu koskaan ratkaista mitään ongelmia, varsinkin jos ne kirjoittavat pala rajat selaimen CSS.
Ilman käyttää HTML taulukot, ongelma keskitys esineen, olipa se sitten kuva tai jonkin tekstin sisältävä alue on todennäköisesti ollut jokaisessa UI / CSS kehittäjät painajainen jossain vaiheessa. Tämän ongelman lisäksi ekstrapoloi huolet yhdenmukaistaa, jos kohde on keskellä on dynaaminen luonteeltaan, eli kun sen korkeus on vaihteleva (tuntematon korkeus).
Vaikka ei tiedetä suoraviivaista ratkaisua, joka toimisi kaikissa eri selaimilla meidän on käsiteltävä, ratkaisu, olen yrittänyt päästä ei tunnu töihin harvat selaimet, joita olen kokeillut sitä (IE6, IE 7 , FF).
RATKAISU:
Vuonna selaimet, kuten Mozilla, Opera ja Safari, outo käyttäytyä "vertical-align" omaisuus saadaan järkiinsä, yksinkertaisesti asettamalla "näyttö"-ominaisuuden sisältävän divisioonan "table-cell" (display: table-cell) .
Ongelmana on edelleen IE perheen selaimissa, joka vielä ei näytä ymmärtävän, mitä on "table-cell"-ominaisuus, ja tietämätön kuin ne ovat, he vain välitä siitä. Ratkaisu alla, mutta yksinkertainen, mainoksia muutama DOM-elementtejä HTML saada asioita tapahtumaan.
CSS ja HTML näyttää tältä
.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/> Views: 3456 </ div>
</ Div>
</ Div>
Tulos näyttää tältä: -
Katso esittely tästä | Download Source Files (Downloaded 451 kertaa)
Ymmärtäminen ratkaisu: Sillä selaimet ymmärtävät näyttö: pöytä ja display: table-cell ominaisuuksia, se harvoin tarvitsee mitään selitystä. IE, joiden käyttö IE erityisiä hack (hash hakata), meidän on ehdottomasti sijoittaa kohde säiliö (obj_container) puolessa käytettävissä korkeuden. Sitten objekti (obj) sisällä on sijainti suhteellisen ja siirretään kasvoi puolet sen korkeus ... No! En tunnu ymmärtävän ulkoasua naamasi, mutta se toimii. Kokeile! Edellä tekniikoita yhdistettiin, jolloin saatiin meille edellä risti selaimen liuosta.
CSS voidaan helposti muuttaa alla saavuttaa, vertical-align: top tai vertical-align: bottom TOP Kohdista 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/> Views: 1234 </ div>
</ Div>
</ Div>
Tulos näyttää tältä: -
BOTTOM Kohdista 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/> Views: 1234 </ div>
</ Div>
</ Div>
Tulos näyttää tältä: -
Katso esittely tästä | Lataa tästä
Horisontaalinen keskitys kohteen yksinkertaisesti saavutetaan margin ominaisuus, asettamalla margin-left ja margin-right auto Tuntuu aikojen, kun yritin löytää järkevä ratkaisu linjaus ongelmaan. Mutta nyt tähän ratkaisuun, tunnen pienin rauhassa.
Kun toivoa, että jonain päivänä
- pystysuora tasaus kiinteistön CSS toimii kuten se tekee sisälle taulukon solun ilman voittamaan paljon ympärillä pensas
- Ainakin, jossa margin-top: auto ja margin-bottom: auto, antaa kuin samaan tulokseen kuin margin-left ja margin-right asetettu auto
- Selain sodat on ohi joskus.
- Siellä tulee vain yksi selain KAIKILLE.
Lataa CSS ja HTML edellä ratkaisulta (Downloaded 451 kertaa) .. ja ymmärrettävyyden, CSS ei ole optimoitu
PS: Ja muuten, ne ovat pikkukuvat joitakin kuvia olen napsauttanut ... 
