Biz bir tablo hücresinde bazı içerik hizalayarak, bizim sayfa düzenleri oluşturmak için CSS ile uğraşmak zorunda kaldı önce, sadece çocuk oyuncağı gibiydi. Basitçe "align" veya seçtiğiniz hizalama, çocuk oyuncağı olması tablonun "valign" özelliğini ayarlayın!
Biz elemanları için özellik "vertical-align" sahip olsa css ile, bu "align" veya "valign" özellikleri gibi basit olması görünmüyor. Daha specifiic olmak "vertical-align" çapraz tarayıcı CSS parçası yazmak, özellikle de sizin sorunları çözmek için herhangi bir gibi görünüyor.
HTML Tabloları kullanımı olmadan, nesne üzerinde merkezleme ve SORUN, herhangi bir görüntü veya içeren bölümü içinde bazı metin, belki bir noktada her UI / CSS geliştiricileri kabusu olmuştur olacaktır. Bu sorun daha da ortalanmış olarak nesne doğada dinamik olursa, yüksekliği değişken olduğunda, yani uyumlaştırmak üzüntülerin extrapolates (bilinmeyen yükseklik).
Biz uğraşmak zorunda tarayıcılarının aralığında çalışacak bilinen hiçbir yalındır çözüm olsa da, ben yapar varmak için denedim çözüm (IE6, IE 7 ben bunu denedim birkaç tarayıcılarda çalışır gibi görünüyor , FF).
ÇÖZÜM:
Mozilla, Opera ve Safari gibi tarayıcılarda garip özelliği basitçe "table-cell" (display: table-cell) için içeren bölünme "ekran" özelliğini ayarlayarak, onun duyular getirilebilir "vertical-align" davranıyor .
Sorun hala, ama onlar, onlar sadece bunu görmezden gibi "table-cell" mülkiyet ve cahil ile ne anlamak için kim görünmüyor, tarayıcı IE ailesi ile kalır. Şeyler yapmak için HTML basit, reklamlar birkaç DOM öğeleri olsa da, aşağıda verilen çözüm.
CSS ve HTML bu gibi görünüyor
.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"/> kez <br/>: 3456 </ div>
</ Div>
</ Div>
Sonuç şöyle: -
Burada demo görüntülemek | İndir Kaynak Dosyaları (454 kez indirildi)
Çözüm Anlamak: Masa ve ekran: ekran anlamak tarayıcılar için Tablo-hücre özelliklerini, nadiren herhangi bir açıklama gerekiyor. IE için, kullanımı bir IE özgü hack (hash hack) ile, biz kesinlikle mevcut yüksekliği yarısında nesnesi konteynerinin (obj_container) yerleştirin. Sonra içinde nesne (obj) görece konumu, yüksekliği yarısı tarafından taşınır ... Eh! Ben senin yüzüne bakmak anlamak için görünüyor, ama Çalışıyor. Deneyin! Yukarıdaki teknik us yukarıda çapraz tarayıcı çözelti verecek şekilde birleştirilmiştir.
Üst ya da vertical-align: CSS kolayca vertical-align, elde etmek için aşağıda değiştirilebilir alt TOP CSS Hizala
.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"/> kez <br/>: 1234 </ div>
</ Div>
</ Div>
Sonuç şöyle: -
ALT CSS Hizala
.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"/> kez <br/>: 1234 </ div>
</ Div>
</ Div>
Sonuç şöyle: -
Burada demo görüntülemek | buradan indirin
Basitçe, margin-left ayarlayarak ve margin-right auto marj özelliği ile elde nesnenin merkezleme Yatay Bu uyum sorunu için makul bir çözüm bulmaya çalışan bu yana, yaşları gibi görünüyor. Ama şimdi bu çözüm ile, ben biraz huzur hissediyorum.
Bu gün bir umut
- CSS dikey hizalama özelliği çalının etrafında çok dövmeye sahip OLMADAN, bir tablo hücresinde yaptığı gibi çalışacak
- En azından, margin-top ayarı: otomatik ve margin-bottom: oto, margin-left ve margin-right seti auto ile aynı sonucu verecektir
- Tarayıcı savaşları bir gün bitecek.
- Orada olacak TÜM için sadece tek bir tarayıcı.
Burada yukarıdaki çözüm CSS ve HTML indirin (454 kez indirildi) .. anlaşılabilirliği için, CSS optimize edilmiş değil
PS: Bu arada, bu benim tıklandığında bazı resimlerin küçük olan ... 
