Căn chỉnh CSS theo chiều dọc của các thành phần khối nội tuyến / nội tuyến

Tôi đang cố gắng để có được một số inlinevà inline-blockcác thành phần được sắp xếp theo chiều dọc trong một div. Làm thế nào mà spantrong ví dụ này khăng khăng bị đẩy xuống? Tôi đã thử cả hai vertical-align:middle;và vertical-align:top;, nhưng không có gì thay đổi.

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

KẾT QUẢ:

VĨ CẦM

vertical-alignáp dụng cho các phần tử được căn chỉnh, không phải phần tử cha của chúng. Để sắp xếp theo chiều dọc con của div, thay vào đó, hãy làm điều này:

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

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

LƯU Ý : vertical-alignliên quan đến dòng văn bản hiện tại, không phải chiều cao đầy đủ của cha mẹ div. Nếu bạn muốn phụ huynh divlà cao hơn và vẫn có những yếu tố theo chiều dọc làm trung tâm, thiết lập divcủa line-heighttài sản thay vì nó height. Theo liên kết jsfiddle ở trên cho một ví dụ.

Cho vertical-align:top;vào a& span. Như thế này:

a, span{
 vertical-align:top;
}

Kiểm tra http://jsfiddle.net/TFPx8/10/

Đơn giản chỉ cần nổi cả hai yếu tố để đạt được kết quả tương tự.

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

Để tinh chỉnh vị trí của một inline-blockmục, sử dụng trên cùng và bên trái:

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

Cảm ơn thủ thuật CSS !