Css3 Translate Yöntemi ile Yazıları Kutu içine Hizalama

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ı:




.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%);
}

.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.

Css3 Translate Yöntemi ile Yazıları Kutu içine Hizalama

Tarayıcı Desteği

Css Kod Yapısı:

Örnek

Yorum yap