display:inline-block tanımı yapılmış elemanlar satır için akış içinde satır içi eleman gibi davranırken, elemente genişlik, yükseklik ve dikey margin değerleri tanımlanırsa satır içinde blok-level özelliğine bürünür.

display:inline-block elementler çevresindeki elementlere ve satır içi kutu içeriklerine göre farklı davranışlar gösterir.

Durumu daha iyi anlamak için genel bir örnek yapalım. 3 paraftan oluşan bir içeriğimiz olsun ve bu içerikteki belli bir kısmı paragraf etiketi içine alalım ve bunlara sırası ile display:block, display:inline ve display:inline-block tanımları atayalım

<div id="denemeBir"> Lorem ipsum dolor sit amet... <p>Praesent id nunc eros. Integer mauris orci, venenatis ac tempor ut, gravida ac diam. </p> Pellentesque...</div>
<div id="denemeIki">Quisque at venenatis nulla...<p>Nam fermentum porttitor hendrerit.</p> Mauris ante nulla..</div>
<div id="denemeUc"> Sed urna neque...<p>Sed est lacus, laoreet at malesuada quis, convallis ut nibh.</p> Sed dapibus...</div>

CSS kodu

div {margin: 10px 0; border: 1px solid #000;}
p {border: 1px dotted #000;}
    div#denemeBir p {display: block; width: 50px; text-align: center; background-color:#FF0}
    div#denemeIki p {display: inline; width: 50px; text-align: center; background-color:#0FF}
    div#denemeUc p {display: inline-block; width: 50px; text-align: center; background-color:#F0F}

Örneği görmek için tıklayınız.

Aynı yapıdaki elemanların display özelliğine sırası ile block, inline ve inline-block tanımlarını atadık.

display:block uygulanan paragraf kendisine atanan width, text-align:center özelliğini yorumlamış ve blok-level bir element olarak sonrasına bir boşluk bırakmıştır.

display:inline tanımı yapılmış paragraf kendisine atanan width, text-align:center tanımlarını görmemiştir.

display:inline-block uygulanmış paragraf ise kendisine uygulanan width ve text-align:center tanımlarını görmüş ama bir blok-level element gibi sonrasına bir boşluk bırakmamıştır. Tam bir hibrit özellik göstermiştir.

display:inline-block tanımını daha iyi anlamak için nerelerde kullanırız neler yapabiliriz buna bakalım.

Float kullanmadan display:inline-block ile elemanları yan yana dizmek

<div id="menu">
<a href="">Ana Sayfa</a>
 <a href="">Ürünler</a>
<a href="">İletişim</a>
</div>

CSS kodumuzu yazalım;

#menu a{
  width:150px;
  height:50px;
  display: inline-block;
  margin:0;
  padding:5px;
  color: #1B1B1B;
  background-color: #E2E2E2;
  text-decoration: none;
  border-top:5px solid #999
}

Örneği görmek için tıklayınız.

Bu kod ile biz öğeleri yan yana dizeriz. Normalde hiç bir tanım yapmasak da bu elemanlar yan yana dizilecekti, ancak bu elemanlar arasındaki mesafeyi ayarlıyamıyacaktık. Hem satır içi eleman gibi yan yana dursun hemde genişlik, yükseklik ve margin tanımlarını uygulayalım istersek display:inline-block tanımı yapmalıyız.

Dikeyde ortalama

Float uygulanmış elemanların dikeyde ortalamak çok zordur, aksine display:inline-block uyguladığımız elemanları sadece vertical-align özelliği kullanarak dikey ortalama yaparız. Dikeyde ortalama aynı seviyedeki elemanlar arasında olduğunu unutmamak lazım.

Bir örnek yapalım. Yan yana dizilmiş üç kutu hazırlayalım ve bunları kapsayıcı katmana göre dikey olarak üstte, ortada ve altta hizalayalım.

<div class="anaKapsul">
    <div class="solKutu">Sol</div>
    <div class="ortaKutu">Orta</div>
    <div class="sagKutu">Sağ</div>
</div>

CSS kodumuzu yazalım.

.anaKapsul { border: 1px gray solid; padding: 5px; text-align: center; }
    .solKutu { display: inline-block; background-color: lightblue; vertical-align: middle; width: 200px; height: 200px; }
    .ortaKutu { display: inline-block; background-color: yellow; vertical-align: middle; width: 200px; height: 150px; }
    .sagKutu { display: inline-block; background-color: gray; vertical-align: bottom; width: 200px; height: 100px; }

Örneği görmek için tıklayınız.

Firefox, Safari, Google Chrome, Opera ve İE8′de bu görüntüyü elde ederiz. Ancak ie7 ve ie6′da durum böyle değildir.

Bu tarayıcılarda aynı sonucu elde etmek için bu tarayıcılar için bu elemnalara display:inline ve zoom:1 tanımı yapmalıyız. Bunun için tüm tarayıcılar için düzeltmeler kısmındaki kodlardan yararlanacağım.

*:first-child+html div.anaKapsul div{display:inline; zoom: 1;}
* html div.anaKapsul div{display:inline; zoom: 1;}

Bu kodları ekledikten sonra sorunumuz düzeldi.

Kaynaklar

• http://www.search-this.com/2008/08/28/lets-all-get-inline-in-a-block-in-a-block/
• http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/
• http://helephant.com/2009/08/a-great-big-welcome-to-inline-block/
• http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
• http://kempwire.com/browsers/firefox-2-does-not-support-inline-block.html
• http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
• http://www.quirksmode.org/css/display.html#t03
• http://blog.ternstyle.us/blog/float-vs-inline-block
• http://www.sitepoint.com/forums/showthread.php?t=596130 (sorun )

• Yuvarlak kenar oluşturmak için bir makale yazdık. CSS3 ile birlikte gelen birden fazla zemin resmi uygulama metodu ile yuvarlak kenarlı kutu oluşturmayı anlatan bir makale. Örneği Firefox ile test edebiliyorsunuz. Link
• CSS ile dikey ortalama ile ilgi bir makale yazdık. Makalede de bahsettiğim gibi bir çok yöntem var ve yenileri de çıkıyor işte bir tane daha Link
• CSS yardımı ile tipografi örneklerinin sergilendiği güzel sayfa Link
• En kolay şekilde daha kolay kullanılan formlar nasıl yaparız. İşte makale Link
• Amerikanın en çok tıklana sitelerini listesini görmek için tıklayın . Link
• Web2.0 hakkında son bir yazı olduğunu iddia ediyor. Link
• CSS ile nasıl sexy buton yapılacağını anlatan bir makale Link
• Firefox bu işin peşini pek bırakcak gibi değil. Firefox 3.0 Alfa1 versiyonunun ftp adresi Link
• Microsoft Google’un yolunu izlemeye devam ediyor. Microsoft kitap aram motoru çıkardı Link=
• Javascript 1.7 demosu çıktı. Bu yeni versiyon ile birlikte bazı yeni css efektleride geliyor işte bunlara bir örnek Link
• Firefox ile birlikte kullandığımız FirefBug eklentisinin IE ye uyarlanmış halide çıkıyor . Link

CSS ile dikeyde ortalama yapmak için vertical-align özelliği var ise de bu özellik HTML’deki tablo gibi çalışmaz. Yani istediğimiz sonuca bizi ulaştırmaz.

CSS vertical-align özelliği belirsiz yükseklikte(içeriği değişebilen) kutularda işe yaramaz.

IE için Keystone’un sunduğu çözüm; mutlak konumlandırma uygulanmış kapsayıcı elemente yüksekliğinin yarısı kadar top(veya margin-top) değeri uygulamaktır. Bu kapsayıcı elementin içindeki elementi dikeyde ortalayacaktır.

Mozilla, Opera, Safari gibi standart web tarayıcıları için çözüm çok farklıdır. Üstteki katmana display:table tanımı yapılır. İçteki elementlere de display:table-cell özelliği uygulanır. Ayrıca dikeyde ortalanmak istenen elemente vertical-align tanımı yaparak element dikeyde ortalanır. (Bu özelliği IE kavrayamamaktadır. Kavramamakta da ısrarlıdır. IE 7 display:table ve türevlerini desteklemiyor.)

İki çözüm vardır altçizgi(_) ve (#) ile yapılan bir çözüm vardır. IE(IE7 hariç) (_) ile tanımlanan kodu görmediği için yorumlamayacaktır. # ile başlayan kodları tüm IE versiyonları(IE7 dahil) görmeyecektir. Bu işaretlerin kullanım amacı tüm versiyonlarda aynı sonucu elde etmektir.

Aşağıdaki kod IE5+,FF, Opera 7, Konqueror 3.0.3 altında standart ve garip mod da çalışıyor.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSS ile dikey ortalama</title>
<style>
#Kapsul{
	display: table;
	height: 400px;
	#position: relative;
	overflow: hidden;
	border: 1px solid green;
}
#IcerikAlani{
	#position: absolute;
	#top: 50%;
	display: table-cell;
	vertical-align: middle;
}
#alan{
	#position: relative;
	#top: -50%;
	border: 1px solid green;
}
</style>
</head>
<body>
  <div id="Kapsul">
    <div id="IcerikAlani">
    <div id="alan">Lorem Ipsum is simply dummy text of the printing and typesetting  industry. Lorem Ipsum has been the industry's standard dummy text ever  since the 1500s, when an unknown printer took a galley of type and  scrambled it to make a type specimen book. </div>
    </div>
  </div>
</body>
</html>

Örneği görmek için tıklayınız.

Kaynaklar

• http://www.jakpsatweb.cz/
• http://wellstyled.com/
• http://www.hicksdesign.co.uk/
• http://www.student.oulu.fi/