inline inline-block bazı bileşenler dikey olarak div uyumlu almaya çalışıyorum. Nasıl bu örnekte span aşağı itiliyor ısrar ediyor? vertical-align:middle; vertical-align:top;, ama hiçbir şey değişmiyor ben de denedim.

HTML:

<div>
  <a></a><a></a>
  <span>Some text</span>
</div>​

CSS:

a {
    background-color:#FFF;
    width:20px;
    height:20px;
    display:inline-block;
    border:solid black 1px;
}

div {
    background:yellow;
    vertical-align:middle;
}
span {
    background:red;
}

SONUÇ:

FIDDLE

vertical-align öğeleri uyumlu olmak, kendi üst öğe değil geçerlidir. Dikey div çocukları hizalamak için, bu yerine gelir

div > * {
    vertical-align:middle;  // Align children to middle of line
}

Bakın: http://jsfiddle.net/dfmx123/TFPx8/1186/

NOT: vertical-align geçerli metin satırının üst div tam boy göredir. Eğer üst div daha uzun ve hala elementler dikey olarak ortalanmış yapmak isterlerse, div'17 *s* height onun yerine özellik. İzleyinjsfiddleörneğin yukarıdaki link.