Görüntüyü CSS'de konumlandırmanın birçok yöntemi vardır; nesne konumu özelliğini kullanarak batmadan yüzmek özellik (öğeleri sola veya sağa hizalamak için).

Nesne konumu özelliğini kullanarak

nesne konumu CSS'deki özellik, kapsayıcı içindeki içeriğin hizalamasını belirtir. İle kullanılır nesneye uygun bir öğenin nasıl veya nasıl olduğunu tanımlamak için özellik içerik kutusunda x/y koordinatlarıyla konumlandırılır.

Kullanırken nesneye uygun özellik, varsayılan değer nesne konumu dır-dir %50 %50 , dolayısıyla varsayılan olarak tüm görseller içerik kutularının ortasına konumlandırılır. Kullanarak varsayılan hizalamayı değiştirebiliriz. nesne konumu mülk.

Sözdizimi

 object-position: | initial | inherit; 

konum değeri nesne konumu özelliği, videonun veya görüntünün kapsayıcı içindeki konumunu tanımlar. İlk değerin x eksenini, ikinci değerin ise y eksenini kontrol ettiği iki sayısal değeri kabul eder. Gibi bir dize kullanabiliriz sol sağ , veya merkez görüntüyü kapta konumlandırmak için vb. Negatif değerlere izin verir.

Bazı örneklerle bunu daha net anlayabiliriz.

Örnek

Bu örnekte aşağıdaki gibi dize değerlerini kullanıyoruz: 'sağ üst', 'orta üst', Ve 'sol üst' görüntüyü konumlandırmak için.

 CSS object-position property #center { width: 400px; height: 150px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: center top; } #left { width: 400px; height: 150px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: left top; } #right { width: 400px; height: 150px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: right top; } <h3>object-position: center top;</h3> <h3>object-position: left top;</h3> <h3>object-position: right top;</h3> 

Çıktı

Şimdi, kullanmanın başka bir örneği daha var. nesne konumu mülk.

Örnek

Bu örnekte, şunu kullanıyoruz: ilk görüntüyü merkeze konumlandıran değer. Bunun nedeni, başlangıç ​​özelliğinin özelliği varsayılan değerine ayarlamasıdır; %50 %50 . Ayrıca sayısal değerleri de kullanıyoruz. 200 piksel Ve 100 piksel .

 CSS object-position property #num { width: 400px; height: 250px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: 200px 100px; } #init { width: 400px; height: 250px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: initial; } <h3>object-position: 200px 100px;</h3> <h3>object-position: initial;</h3> 

Çıktı

Float özelliğini kullanarak

CSS float özelliği, bir öğeyi sola veya sağa iterek diğer öğelerin onun etrafına sarılmasına olanak tanıyan bir konumlandırma özelliğidir. Genellikle görseller ve düzenlerle kullanılır.

Elemanlar yalnızca yatay olarak yüzdürülür. Yani elemanları yukarı veya aşağı değil, yalnızca sola veya sağa kaydırmak mümkündür. Yüzen bir eleman mümkün olduğu kadar sola veya sağa hareket ettirilebilir. Basitçe, kayan bir öğenin en solda veya en sağda görüntülenebileceği anlamına gelir.

Kullanımına bir örnek verelim batmadan yüzmek mülk.

Örnek

 CSS float property #left { float: left; } #right { float: right; } 

Çıktı