[英]How can I center a div inside a div?
我正在尝试创建联系人列表,但无法将其包围。 我想垂直居中细节面板:
.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上:
我希望详细信息(名称和电子邮件)在面板内垂直居中,如何实现?
如果高度未知,则可以使用“表格技巧”将内容垂直居中。
链接到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;
}
使用顶部和底部填充可以执行此操作,将填充添加到detailpanel
更新您的CSS以获得课程详细信息
.contactpanel .detailspanel
{
margin-left: 65px;
padding: 12px 0;
}
或者,您也可以尝试以下方法:
.contactpanel .detailspanel {
bottom: 0;
height: 40px;
margin: auto 0 auto 65px;
position: absolute;
top: 0;
}
查看contactpanel
的高度( 60px
,您将获得一个id
detailspanel
的div
。 简单的填充将调整center
的detailspanel
。
尝试使用padding : 10px
,它将调整detailspanel
为中心。
要完全控制页面上的元素进行调整。 将个人div's
name
和email
的高度设置为15px
没有任何padding
和margin: 10px
,这可以解决问题。 由于name
和email
div的margin-bottom
和margin-top
将折叠。
为div.detailspanel添加绝对位置,如下所示:
.contactpanel .detailspanel
{
margin-left: 74px;
position: absolute;
margin-top: 11px;
}
供您参考,请检查此小提琴: http : //jsfiddle.net/hu6wq7km/9/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.