Izsakot IT

Pirms mums bija tikt galā ar CSS izveidot mūsu lapas izkārtojumus, saskaņojot daļu satura iekšpusē tabulas šūnā likās tikai bērnu spēle. Vienkārši noteikt "saskaņot" vai "valign" īpašums tabulas ir izlīdzinājumu jūsu izvēles, gabals ir nieks!
Ar CSS izkārtojumu, taču mums ir "vertikāli saskaņot" īpašumu elementiem, tas nešķiet tik vienkārša kā "izlīdzināt" vai "valign" īpašībām. Ir vairāk specifiic "vertikāli saskaņot" nekad, šķiet, lai atrisinātu kādu no jūsu problēmu, it īpaši, ja ir uzrakstīt kādu pārrobežu pārlūku CSS.

Neizmantojot HTML tabulas, no centrējot uz objekta PROBLĒMA, vai tas būtu attēls vai kādu robežās saturoša rajons teksts, iespējams, bijis katru UI / CSS izstrādātāji murgs kādā brīdī. Šī problēma vēl ekstrapolē jūsu rūpes veikt saskaņošanu, ja objekts centrā ir dinamisks raksturs, ti, kad tās augstums ir mainīgs (zināms augstums).

Lai gan nav zināms, taisni uz priekšu risinājums, kas darbosies visā diapazonā no pārlūkprogrammām mums jātiek galā ar, risinājums, ko esmu mēģinājis, lai nonāktu pie tas šķiet strādāt dažās pārlūkprogrammās, ka esmu mēģinājis to (IE6, IE 7 , FF).

RISINĀJUMS:
Pārlūkprogrammās, piemēram, Mozilla, Opera un Safari, dīvaini uzvedas "vertikāli saskaņot" īpašums var tikt vērsta uz to sajūtas, vienkārši nosakot "Display" īpašums saturošā divīzija "galda šūnas" (displejs: galda šūna) .

Problēma joprojām ir ar IE ģimenē pārlūkiem, kurš, tomēr nešķiet saprast, ko ar "galda šūnu" īpašums un nezinošs, jo viņi ir, viņi vienkārši ignorēt to. Risinājums norādīts turpmāk, gan vienkāršiem, reklāmas dažas vairāk DOM elementu, lai jūsu HTML, lai padarītu lietas notikt.

CSS un HTML izskatās šādi
.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/> skatījumi: 3456 </ div>
</ Div>
</ Div>

Rezultāts izskatās šādi: -

apskatīt demo šeit Pārsūtīt | Download Avots Faili (aplūk. 452 reizes)

---

Izpratne risinājumu:
Par pārlūkiem, kas saprot displejs: galda un displejs: galda šūnu īpašības, tai reti nepieciešama jebkādiem paskaidrojumiem. IE, izmantojot IE specifiska kapāt (hash banalizēt), mēs absolūti pozicionēt objektu konteineriem obj_container) pusē no pieejamā augstumā. Tad objekts (obj) ietvaros ir pozīcijas relatīvi un pakāpās uz pusi no sava augstuma ... Nu! Šķiet, ka es saprotu izskatu uz sejas, bet tas strādā. Pamēģini!
Iepriekšminētās metodes ir apvienoti, lai dotu mums virs savstarpējās pārlūka risinājumu.

---

CSS var viegli modificēt, kā turpmāk, lai panāktu, vertikālā-align: top vai vertikāli-align: bottom

TOP Līdzināt 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/> viedokli: 1234 </ div>
</ Div>
</ Div>

Rezultāts izskatās šādi: -

APAKŠAS Līdzināt 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/> viedokli: 1234 </ div>
</ Div>
</ Div>

Rezultāts izskatās šādi: -

apskatīt demo šeit | Lejupielādēt šeit

---

Horizontāli centrējot no objekta vienkārši sasniegt ar starpības īpašumu, nosakot peļņas normas kreisi un starpība labo uz auto

Šķiet, piemēram vecumu, jo man bija mēģina atrast pieņemamu risinājumu šai līdzināšanas problēmu. Bet tagad ar šo risinājumu, es jūtos kā maz miera.

Ar cerību, ka kādu dienu

• vertikālās regulēšanas īpašums CSS darbosies tāpat kā tas iekšā tabulas šūnā, bez beat daudz ap krūms
• Vismaz, nosakot starpība-top: auto un margin-bottom: auto, sniegs tādu pašu rezultātu kā ar starpību kreiso un starpība labo komplekts uz auto
• Pārlūku karus būs vairāk nekā dažas dienas.
• Tur būs tikai viens pārlūks ALL.

Lejupielādēt CSS un HTML iepriekšminētā šķīduma šeit (aplūk. 452 reizes) .. par saprotamības, CSS nav optimizēts

PS: Un starp citu, tie ir sīktēlus dažas bildes man ir noklikšķinājuši ...