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:
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/
CSS:
.contactpanel
{
display:table;
}
.contactpanel .icon
{
display: table-cell;
vertical-align: middle;
}
.contactpanel .detailspanel
{
display: table-cell;
vertical-align: middle;
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments