
9 Haziran 2015
minimalcoding
1795
0
Css3 Translate Yöntemi ile Yazıları Kutu içine Hizalama
Css3 transform:translate yöntemi, x ve y ekseni için verilen parametelere göre konumlandırma işlemi gerçekleştirmektedir. Biz bu yazımızda kullanmayı sıklıkla tercih ettiğimiz yazıları div içine yatay hizalama, dikey hizalama ve hem dikey hem yatay hizalama yönteminden bahsedeceğiz tabi bunları transform:translate olmadan da yapmak mümkün. CSS3 image hover effect adlı yazımızda da bu yöntemi kullanmıştık , şimdi bu yapıyı tek başına inceleyelim.
Tarayıcı Desteği
Tarayıcılar | ![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
Versiyon | 36.0 4.0 -webkit- |
3.2 -webkit- | 10.0 9.0 -ms- |
16.0 3.5 -moz- |
23.0 15.0 -webkit- 12.1 10.5 -o- |
Css Kod Yapısı:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.example{ -ms-transform: translate(20px,10px); /* IE 9 */ -webkit-transform: translate(20px,10px); /* Safari */ transform: translate(20px,10px); } .example-percent{ -ms-transform: translate(50%,50%); /* IE 9 */ -webkit-transform: translate(50%,50%); /* Safari */ transform: translate(50%,50%); } |
Örnek
See the Pen JdNeKN by MinimalCoding (@MinimalCoding) on CodePen.
Minimal Coding Privacy Policy
Sitemizi ziyaret eden kullanıcılar aşağıdaki koşulları, yazılanlarla sınırlı olmamak şartıyla kabul etmiş sayılacaktır. “www.minimalcoding.net” sitesinde yer alan tüm bilgiler,tasarım,logo,yorum ve tavsiyeler ile ses, görüntü, yazı içeren bilgi ve belgeler (“İçerik”) ile buradan yapılan tüm linkler, kullanıcıya genel bilgi vermek amacıyla sunulmuştur.
Burada mevcut olan İçerik, Minimal Coding'i Kaynak göstermeden paylaşılamaz ve yayınlanamaz. Bu siteye erişim serbest ve anonimdir.