Webtasarım yaparken şüphesiz  en çok kullandığımız tuşlar d, i, v harfleridir. Çünkü bir bir bölüm oluştururken div ile başlar ve /div ile de bitiririz kullanacağımız alanı. Her çerçeveyi onunla oluşturur  sonrasında Css ile renk, boyut, konum gibi özellikleri ekler şekillendiririz tasarımımızı.

Div kullanarak yan yana çerçeveler yapabildiğimiz gibi iç içe de kullanabiliriz çerçevelerimizi. İç içe div oluşturduğunuz zaman içerdeki div standart olarak sol tarafta durur. İçerdeki çerçeveleri çoğalttığımızda ise alt alta sıralanırlar. Çerçeveyi yada çerçevelerin pozisyonunu değiştirmek için Css kullanmamız gerekmektedir.

Ortalanmamış çerçeve

Bu örnekte 150×150 piksel boyutunda kırmızı bir div ve içine de 50×50 piksel boyutunda mavi bir div yerleştirdik. Kırmızı olan cerceve1 ve mavi olanı yani içeride olanı da cerceve2 diye sınıflandırdık. Gördüğünüz gibi  sadece boyut ve renk ekleyerek oluşturduğumuzda standart olarak sol tarafa mavi çerçevemiz yerleşti.

Div içinde div ortalama

Şimdi sıra geldi mavi çerçevemizi kısa yoldan ortalamaya. Bir div içine eklenmiş olan bir nesneyi yada bir başka divi ortalamak için kullanmamız gereken  margin: 0 auto;  kodudur. Margin kaydırma anlamına gelirken 0 yani sıfır üst çerçeveye olan mesafeyi, auto ise sağ ve sol çerçeve arasındaki mesafeyi ilgilendirir. Auto olarak belirlememizin sebebi ise dış çerçevenin boyutu ne  olursa olsun içerdeki çerçevenin ortada durmasıdır. Auto dediğimiz zaman içerideki çerçeve daima ortada durur.

Div içinde resim ortalama

Bunu yapmanın en basit yolu yine div içine başka bir div ile çerçeve ekleyip içerdeki çerçevenin içine de resmi yerleştirmek. Bu şekilde yaptığınız zaman resim de çerçeve ile beraber ortalanır. Dikkat etmeniz gereken konu çerçeve resmin boyutlarının aynı olmasıdır. Aksi taktirde eklediğiniz resim tam ortalanmış olarak görünmez. Tabi bunun başka yöntemleri de var elbette ama en kısa yolu bu şekilde oluyor. Aşağıdaki örnekte çerçeve1 içine eklenmiş olan çerçeve2 içindeki resmin ortalanışını görüyorsunuz. Sağdan ve soldan eşit şekilde ayarlanmış olarak görünüyor. Cerceve2 nin boyutu 100×100 piksel ve resmin boyutu da 100x100px olarak ayarlanmış olduğundan cerceve2 görünmüyor.

a- Margin kullanımı

Margin dediğimiz kaydırma olayı sağa, sola, yukarıya, aşağıya olarak da ayarlanabilir.  Margin-left soldan sağa, margin-right sağdan sola, margin-top yukarıdan aşağıya ve margin bottom aşağıdan yukarıya doğru kaydırma yapabilmenize yarar. Dış çerçeveden daha küçük bir resmi ortalamak için resim elementine yani <img src=”resimadresi diye eklenen html elementine Css ile müdahale etmemiz gerek. Bunun için Resmin olduğu çerçeve ismi örnek:cerceve2 ve arkasından img elementini kullanarak belirlediğimiz div içindeki bütün resimleri kaydırabiliriz. Bir önceki örnekte ise tam tersine resme değil çerçeveye müdahale etmiştik. Margin-left ve margin-right kullanarak resmi çerçevenin ortasına doğru kaydıracağız.

b- Center kullanımı

Center bildiğiniz gibi orta demek oluyor. <center></center> yazan yere eklediğiniz nesneler dış çerçeveye göre Css ye gerek kalmadan kendini ortalar.

Yazı ortalama

Sıra geldi bir çerçeve içindeki yazıyı ortalamaya. Css ile text yani yazı ortalamak için yazılarınızı bir html elementinin içine ekleyip kullanmanız, yazıyı Css ile daha rahat seçebilmeniz açısından önemlidir. Sadece ortalamak isterseniz yazının içinde olduğu çerçeveye text-align:center; eklemeniz yeterlidir. Yukarıdan aşağıya ortalamak için de line-height:10px; şeklinde yada daha yüksek bir rakam kullanarak ortalanana kadar rakamı yükseltmeniz gerekir.  Aslında yazınızı eklediğinizin çerçevenin boyutunu girmeniz aşağı yukarı doğru noktayı bulmanıza yeter. Tam ortayı bulmak istiyorsanız line-height değerini, çerçevenin yüksekliği eksi yazının yüksekliği şeklinde nelirleyebilirsiniz. Yani çerçeveniz 100piksel ve yazı karakterlerinin yüksekliği de 10 piksel ise line-height:90; şeklinde girmeniz gerekir. Css ile hazırladığım bu basit örnekte yazıyı <p></p> elementlerine ekledim. Yazılar için kullanılabilir html elementler h1, h2, h3, h4, h5, h6, p elementleridir. Bunlar dışında nadir de olsa kullanılan html text elementleri; <b>, <strong>, <i>, <em>, <mark>, <small>, <del>, <ins>, <sub> <sup>