html - 水平对齐 div 和自动换行中的元素

Question

HTML 是

<div class="jfmfs-friend-container">
    <div class="jfmfs-friend  ">
        <input class="friend-checkbox" type="checkbox">
        <img src="/picture">
        <div class="friend-name">Test User</div>
    </div>
</div>

在这里，我能够在一行中实现所有三个元素 checkbox、img 和 friend-name div。我正在寻找以下内容:

1. checkbox 和 friend-name 在 img 的垂直中间。
2. friend 名div中的自动换行
3. 所有元素之间的距离相等(至少 5 像素)。现在所有 3 个彼此相邻，没有空间

这是我的 CSS。我正在为任何 display:block 属性的父 div 提供 css 代码:

.jfmfs-friend div {
    color:#111111;
    font-size:11px;
    overflow:hidden;
    display:inline-block;
}

div.friend-name  {
    margin-left: 10px;
    vertical-align: middle;
    word-wrap: break-word;
}

.friend-checkbox {
    position: relative;
    vertical-align:middle;
    display: inline-block;
}

#jfmfs-friend-container {
    overflow:scroll;
    overflow-x: hidden;
    -ms-overflow-x: hidden;
    width:100%;
    height:400px;  
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    color: #333;
    font-size: 12px;
}

Answer 1

演示:http://jsfiddle.net/55twK/

1. 将 vertical-align:middle 设置为所有三个元素，现在您错过了 img。
2. 现在所有三个元素都像内联元素一样工作，如果有更多文本，div 可以将自己换行到新行。因此，其中一种选择是为 div 设置宽度或最大宽度。
3. 水平边距和边距适用于行内元素。