Question

我正在尝试创建一个联系人列表，但无法绕过它。我想垂直居中的细节面板：

.contactpanel .icon
{
    background: url('http://www.alter-net.info/Person.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 14px 14px;
    position: absolute;
    left: 0;
    width: 60px;
    height: 60px;
}

.contactpanel .detailspanel
{
    margin-left: 65px;
}

它在JSFiddle：

http://jsfiddle.net/hu6wq7km/

我希望细节（姓名和电子邮件）在面板内垂直居中，我该如何实现？

Answer 1

如果身高未知，您可以使用“表格技巧”垂直居中您的内容。

链接到JSbin：http://jsfiddle.net/9xqdtbqu/

CSS：

.contactpanel
{
    display:table;
}

.contactpanel .icon
{
   display: table-cell;
   vertical-align: middle;      

}

.contactpanel .detailspanel
{
   display: table-cell;
   vertical-align: middle;    
}

Answer 2

使用填充顶部和底部可以执行此操作，将填充添加到detailpanel

更新您的css以获取课程详情面板

.contactpanel .detailspanel
{
    margin-left: 65px;
    padding: 12px 0;
}

http://jsfiddle.net/hu6wq7km/5/

Answer 3

或者作为替代方案，你可以试试这个：

.contactpanel .detailspanel {
    bottom: 0;
    height: 40px;
    margin: auto 0 auto 65px;
    position: absolute;
    top: 0;
}

Answer 4

查看contactpanel 60px的高度div，id detailspanel detailspanel。简单填充将调整center中的padding : 10px。

尝试使用detailspanel，将div's调整为居中。

通过完全控制页面上的元素进行调整。将name和email的个人15px设置为padding的高度，而不包含任何margin: 10px和margin-bottom，这样就可以了。由于margin-top和name div的email和{{1}}会崩溃。

Answer 5

为div.detailspanel添加绝对位置，如下所示：

.contactpanel .detailspanel
{
    margin-left: 74px;
    position: absolute;
    margin-top: 11px;
}

供您参考检查这个小提琴： http://jsfiddle.net/hu6wq7km/9/

我怎样才能将div放在div中？

5 个答案: