水平对齐 div 和自动换行中的元素答案

【问题标题】：Horizontally aligning elements in a div and word wrap水平对齐 div 和自动换行中的元素
【发布时间】：2013-01-14 23:14:21
【问题描述】：

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

复选框和好友名称在图片的垂直中间。
朋友名 div 中的自动换行
彼此距离相等（至少 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;
}

【问题讨论】：

标签： html css

【解决方案1】：

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

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

【讨论】：

【解决方案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 属性上的这些参考。

【讨论】：