How can I center a div inside a div?

Question

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:

http://jsfiddle.net/hu6wq7km/

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

How many times can these questions be asked? Search the site, this question (and some very similar) have been asked tons of times before. Search the site before posting a question, it would be quicker doing that then writing this question. — Ruddy, Jan 29 '15 at 11:10
for example: http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers?rq=1 — jbutler483, Jan 29 '15 at 11:15

score 2 · Accepted Answer · answered Jan 29 '15 at 11:16

2

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

answered Jan 29 '15 at 11:16

Linus

448
2
5

Thank you Linus! Just what I needed. Setting them to act as good ol' table was cool! – Jason94 Jan 29 '15 at 11:38

Swapnil Motewar · Answer 2 · 2015-01-29T11:26:52.667

0

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

update your css for class detailspanel

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

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

edited Jan 29 '15 at 11:26

answered Jan 29 '15 at 11:13

Swapnil Motewar

1,080
6
12

score 0 · Answer 3 · answered Jan 29 '15 at 11:15

0

Or as an alternative you could try this:

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

answered Jan 29 '15 at 11:15

Aaron

10,187
3
23
39

score 0 · Answer 4 · answered Jan 29 '15 at 11:22

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.

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

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.

score 0 · Answer 5 · answered Jan 29 '15 at 11:37

0

Add position absolute for the div.detailspanel like below:

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

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

answered Jan 29 '15 at 11:37

rajesh

1,475
10
23

How can I center a div inside a div?

5 Answers5