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

I'm trying to create a contact list but can't wrap my head around it. I want to vertically center the detailspanel:

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

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

It's on JSFiddle:

它在JSFiddle上:

http://jsfiddle.net/hu6wq7km/

I want the details (name and email) to be centered vertically inside the panel, how can I accomplish that?

我希望细节(名称和电子邮件)在面板内垂直居中,我该如何实现?

5 个解决方案

#1

If the height is unknown you could use the "table trick" to vertically center your content.

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

Link to JSbin: http://jsfiddle.net/9xqdtbqu/

链接到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;    
}

#2

Or as an alternative you could try this:

或者作为替代方案,你可以试试这个:

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

#3

Looking at the height of the contactpanel which is 60px and you have a div with id detailspanel. Simple padding will adjust the detailspanel in center.

查看触摸屏的高度为60px,并且您有一个带有详细信息面板的div。简单的填充将调整中心的细节面板。

try with padding : 10px which will adjust the detailspanel to center.

尝试填充:10px将调整细节面板到中心。

To adjust with complete control of the elements on the page. set the individual div's of name and email to a height of 15px without any padding and margin: 10px, this will do the trick. Since the margin-bottom and margin-top of name and email div will collapse.

通过完全控制页面上的元素进行调整。将个人div的名称和电子邮件设置为15px的高度,没有任何填充和边距:10px,这将成功。由于名称和电子邮件div的margin-bottom和margin-top将崩溃。

#4

Using padding top and bottom you can do this, add padding to detailpanel

使用填充顶部和底部可以执行此操作,向detailpanel添加填充

update your css for class detailspanel

更新你的CSS的课程详情面板

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

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

#5

Add position absolute for the div.detailspanel like below:

为div.detailspanel添加绝对位置,如下所示:

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

For your reference check this fiddle: http://jsfiddle.net/hu6wq7km/9/

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

#1