İki resim ve bir h1
içeren bir div'im var. Hepsinin div içinde dikey olarak yan yana hizalanması gerekiyor.
Görüntülerden birinin div içinde mutlak
olarak konumlandırılması gerekir.
Bunun tüm yaygın tarayıcılarda çalışması için gereken CSS nedir?
<div id="header">
<img src=".." ></img>
<h1>testing...</h1>
<img src="..."></img>
</div>
Hepsinin div içinde dikey olarak hizalanması gerekir
Nasıl hizalanmış? Görsellerin üst kısımları metnin üst kısmıyla aynı hizada mı?
Resimlerden birinin div içinde mutlak olarak konumlandırılması gerekir.
DIV'e göre kesinlikle konumlandırılmış mı? Belki de ne aradığınızı taslak olarak çizebilirsiniz...?
fd mutlak konumlandırma adımlarını ve H1
öğesinin görüntüsünü, görüntüler onunla aynı hizada görünecek şekilde ayarlamayı açıklamıştır. Buna, vertical-align
stilini kullanarak resimleri hizalayabileceğinizi de ekleyeceğim:
#header h1 { display: inline; }
#header img { vertical-align: middle; }
...bu, üst kenarları hizalı olacak şekilde başlığı ve resimleri bir araya getirir. Diğer hizalama seçenekleri mevcuttur; belgelere bakın. Ayrıca DIV'i bırakıp görüntüleri H1
öğesinin içine taşımayı da faydalı bulabilirsiniz - bu, kapsayıcıya anlamsal değer sağlar ve `H1'in görüntüsünü ayarlama ihtiyacını ortadan kaldırır:
<h1 id=header">
<img src=".." ></img>
testing...
<img src="..."></img>
</h1>
Varsayılan olarak h1 bir blok elemanıdır ve ilk img'den sonraki satırda render edilir ve ikinci img'nin bloğu takip eden satırda görünmesine neden olur.
Bunun oluşmasını engellemek için h1'i satır içi akış davranışına sahip olacak şekilde ayarlayabilirsiniz:
#header > h1 { display: inline; }
img'yi kesinlikle div'in içine konumlandırmaya gelince, bunun düzgün çalışması için içeren div'i "bilinen bir boyuta" sahip olacak şekilde ayarlamanız gerekir. Deneyimlerime göre, position özelliğini de varsayılandan farklı bir şekilde değiştirmeniz gerekiyor - position: relative benim için işe yarıyor:
#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }
Bunu çalıştırabilirseniz, istediğiniz etkiyi elde etmek için gereken minimum nitelikleri elde etmek için div.header'dan yükseklik, genişlik, konum niteliklerini aşamalı olarak kaldırmayı deneyebilirsiniz.
GÜNCELLEME:
İşte Firefox 3 üzerinde çalışan eksiksiz bir örnek:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Example of vertical positioning inside a div</title>
<style type="text/css">
#header > h1 { display: inline; }
#header { border: solid 1px red;
position: relative; }
#img-for-abs-positioning { position: absolute;
bottom: -1em; right: 2em; }
</style>
</head>
<body>
<div id="header">
<img src="#" alt="Image 1" width="40" height="40" />
<h1>Header</h1>
<img src="#" alt="Image 2" width="40" height="40"
id="img-for-abs-positioning" />
</div>
</body>
</html>
<div id="header" style="display: table-cell; vertical-align:middle;">
...
veya CSS
.someClass
{
display: table-cell;
vertical-align:middle;
}