Her şeyden önce vertical-align
, yalnızca tablo hücreleri ve satır içi düzey öğeleri için geçerli olduğunu unutmayın .
İhtiyaçlarınızı karşılayan veya karşılamayan dikey hizalama elde etmenin birkaç yolu vardır. Ancak size favorilerimden iki yöntem göstereceğim :
1. transform
ve öğelerini kullanmatop
.valign {
position: relative;
top: 50%;
transform: translateY(-50%);
/* vendor prefixes omitted due to brevity */
}
<div style="position: absolute; left: 50px; top: 50px;">
<div style="text-align: left; position: absolute;height: 56px;background-color: pink;">
<div class="valign" style="background-color: lightblue;">test</div>
</div>
</div>
Kilit nokta, üzerindeki bir yüzde değerinin , içeren bloğunkine top
göreli olmasıdır height
; transform
S üzerindeki bir yüzde değeri kutunun kendisinin (sınırlayıcı kutu) boyutuna göreli iken .
Eğer yaşarsanız yazı oluşturma sorunlarından (bulanık yazı), düzeltme eklemektir perspective(1px)
için transform
o olur böylece beyanı:
transform: perspective(1px) translateY(-50%);
transform
IE9 + ' da CSS'nin desteklendiğini belirtmek gerekir .
2. inline-block
(Sözde) öğelerini kullanma
Bu yöntemde, beyan inline-block
yoluyla ortada dikey olarak hizalanan iki kardeş elemanımız var vertical-align: middle
.
Bunlardan biri ebeveynlerinden height
birine 100%
sahip, diğeri ise ortada hizalamak istediğimiz istenen elementimiz.
.parent {
text-align: left;
position: absolute;
height: 56px;
background-color: pink;
white-space: nowrap;
font-size: 0; /* remove the gap between inline level elements */
}
.dummy-child { height: 100%; }
.valign {
font-size: 16px; /* re-set the font-size */
}
.dummy-child, .valign {
display: inline-block;
vertical-align: middle;
}
<div style="position: absolute; left: 50px; top: 50px;">
<div class="parent">
<div class="dummy-child"></div>
<div class="valign" style="background-color: lightblue;">test</div>
</div>
</div>
Son olarak, satır içi düzey öğeleri arasındaki boşluğu gidermek için mevcut yöntemlerden birini kullanmalıyız .
position: absolute
yerde kullanmanızın bir nedeni var mı ?