การจัดตำแหน่งแนวดิ่ง CSS ขององค์ประกอบแบบอินไลน์ / inline-block

ฉันพยายามที่จะได้รับหลายinlineและส่วนประกอบในแนวตั้งในinline-block divทำไมspanในตัวอย่างนี้ถึงยืนยันว่าถูกผลักลงมา? ฉันได้พยายามทั้งสองvertical-align:middle;และvertical-align:top;แต่ไม่มีอะไรเปลี่ยนแปลง

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

ผลลัพธ์:

ซอ

vertical-alignนำไปใช้กับองค์ประกอบที่ถูกจัดแนวไม่ใช่องค์ประกอบหลัก หากต้องการจัดแนวแนวตั้งของ div ให้ทำดังนี้:

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

ดู: http://jsfiddle.net/dfmx123/TFPx8/1186/

หมายเหตุ : vertical-alignสัมพันธ์กับบรรทัดข้อความปัจจุบันไม่ใช่ความสูงเต็มของพาเรนdivต์ ถ้าคุณอยากให้ผู้ปกครองdivที่จะสูงและยังมีองค์ประกอบเป็นศูนย์กลางในแนวตั้ง, ตั้งdivของสถานที่ให้บริการแทนของline-height heightติดตามลิงก์jsfiddleด้านบนเพื่อดูตัวอย่าง

ให้vertical-align:top;ในa& span. แบบนี้:

a, span{
 vertical-align:top;
}

ตรวจสอบhttp://jsfiddle.net/TFPx8/10/นี้

เพียงแค่ลอยองค์ประกอบทั้งสองไปทางซ้ายก็จะได้ผลลัพธ์เดียวกัน

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

สำหรับการปรับตำแหน่งของinline-blockรายการอย่างละเอียดให้ใช้ด้านบนและซ้าย:

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

ขอบคุณCSS-Tricks !