Penjajaran vertikal CSS elemen-elemen sebaris / sebaris

Saya mencoba untuk mendapatkan beberapa komponen inlinedan inline-blockdisejajarkan secara vertikal dalam a div. Bagaimana bisa spandalam contoh ini bersikeras ditekan? Saya sudah mencoba keduanya vertical-align:middle;danvertical-align:top; , tetapi tidak ada perubahan.

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;
}

HASIL:

BIOLA

vertical-alignberlaku untuk elemen yang diluruskan, bukan elemen induknya. Untuk menyelaraskan secara vertikal anak-anak div, lakukan ini sebagai gantinya:

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

Lihat: http://jsfiddle.net/dfmx123/TFPx8/1186/

CATATAN : vertical-alignrelatif terhadap baris teks saat ini, bukan ketinggian penuh dari induk div. Jika Anda ingin orang tua divmenjadi lebih tinggi dan masih memiliki unsur-unsur vertikal terpusat, mengatur div's line-heightproperti bukan nya height. Ikuti tautan jsfiddle di atas untuk contoh.

Berikan vertical-align:top;di a& span. Seperti ini:

a, span{
 vertical-align:top;
}

Lihat ini http://jsfiddle.net/TFPx8/10/

Cukup mengambang kedua elemen yang tersisa mencapai hasil yang sama.

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;
}

Untuk memperbaiki posisi inline-blockitem, gunakan atas dan kiri:

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

Terima kasih CSS-Trik !