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 and friend-name div。我正在寻找以下内容：

复选框和朋友姓名在垂直中间的img。
朋友姓名div中的自动换行
所有元素彼此之间的距离相等（至少5px）。现在所有3个彼此相邻，没有空间

这是我的CSS。我正在为任何显示的父div提供css代码：block property：

.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/

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

Answer 2

要将元素置于“jfmfs-friend”div中心，您需要添加此css：

div.jfmfs-friend  {
    text-align: center;
}

要在“朋友名”中进行自动换行，需要设置宽度。目前它将扩展到它的父母的大小。设置“friend-name”潜水或其中一个父容器的宽度将导致文本在遇到元素边缘时中断。

要使元素彼此分离，您需要使用填充和边距css属性，直到获得所需的效果。为每个元素添加5px的填充可能会做你想要的。

.friend-checkbox, img, .friend-name {
     padding: 5px;
}

您可以使用jsfiddle.net调整布局并进行实时预览。这将帮助您获得所需的间距。

另外，请查看padding和margin属性上的这些引用。

在div和自动换行中水平对齐元素

2 个答案: