[英]How can I center a div inside a 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/ http://jsfiddle.net/hu6wq7km/
I want the details (name and email) to be centered vertically inside the panel, how can I accomplish that? 我希望详细信息(名称和电子邮件)在面板内垂直居中,如何实现?
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: CSS:
.contactpanel
{
display:table;
}
.contactpanel .icon
{
display: table-cell;
vertical-align: middle;
}
.contactpanel .detailspanel
{
display: table-cell;
vertical-align: middle;
}
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/ http://jsfiddle.net/hu6wq7km/5/
Or as an alternative you could try this: 或者,您也可以尝试以下方法:
.contactpanel .detailspanel {
bottom: 0;
height: 40px;
margin: auto 0 auto 65px;
position: absolute;
top: 0;
}
Looking at the height of the contactpanel
which is 60px
and you have a div
with id
detailspanel
. 查看
contactpanel
的高度( 60px
,您将获得一个id
detailspanel
的div
。 Simple padding will adjust the detailspanel
in center
. 简单的填充将调整
center
的detailspanel
。
try with padding : 10px
which will adjust the detailspanel
to center. 尝试使用
padding : 10px
,它将调整detailspanel
为中心。
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. 将个人
div's
name
和email
的高度设置为15px
没有任何padding
和margin: 10px
,这可以解决问题。 Since the margin-bottom
and margin-top
of name
and email
div will collapse. 由于
name
和email
div的margin-bottom
和margin-top
将折叠。
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/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.