Satır içi / satır içi blok öğelerinin CSS dikey hizalaması

Birkaç inlineve inline-blockbileşenleri dikey olarak hizalanmış almaya çalışıyorum div. Nasıl olur spanbu örnekte itiliyorsa ısrar? Her iki denedim vertical-align:middle;ve vertical-align:top;fakat hiçbir şey değişiklikleri.

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Ç:

VAKTİNİ BOŞA HARCAMAK

vertical-alignüst öğelerine değil, hizalanan öğelere uygulanır. Div'ın çocuklarını dikey olarak hizalamak için bunun yerine şunu yapın:

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

Bkz. Http://jsfiddle.net/dfmx123/TFPx8/1186/

NOT : vertical-alignana metnin tam yüksekliğine değil, geçerli metin satırına göredir div. Ebeveyni isterse divuzun olması ve hala dikey merkezli unsurları var ayarlamak için div'ın line-heightyerine onun malı height. Örnek için yukarıdaki jsfiddle bağlantısını takip edin .

Ver vertical-align:top;de a& span. Bunun gibi:

a, span{
 vertical-align:top;
}

Bu http://jsfiddle.net/TFPx8/10/ adresini kontrol edin

Her iki elemanın da solda kalması aynı sonucu verir.

div {
background:yellow;
vertical-align:middle;
margin:10px;
}

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

span {
background:red;
display:inline-block;
float:left;
}

Bir inline-blocköğenin konumunu ince ayarlamak için üst ve sol tuşlarını kullanın:

  position: relative;
  top: 5px;
  left: 5px;

Teşekkürler CSS-püf noktaları !