Как я могу центрировать div внутри div?

Я пытаюсь создать список контактов, но не могу обернуть вокруг него голову. Я хочу вертикально центрировать detailspanel:Как я могу центрировать div внутри 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:

http://jsfiddle.net/hu6wq7km/

Я хочу детали (имя и электронная почта), чтобы быть в центре вертикально внутри панели, как это можно сделать, что ?

источник

2015-01-29 Jason94

Сколько раз эти вопросы можно задавать? Поиск на сайте, этот вопрос (и некоторые очень похожие) были заданы много раз раньше. Поиск на сайте, прежде чем отправлять вопрос, было бы быстрее сделать это, написав этот вопрос. – Ruddy

@ Ruddy: Я просто думал, что сам !!! – jbutler483

например: http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers?rq=1 – jbutler483

Если высота неизвестна, вы можете использовать "ta трюк "для вертикального центра вашего контента.

Ссылка на 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;  
}

источник

2015-01-29 11:16:25 Linus

Спасибо, Линус! Только то, что мне было нужно. Заставить их действовать, как хороший столик, было круто! – Jason94

Использование обивка сверху и снизу вы можете сделать это, добавьте обивка в detailpanel

обновления ваш CSS для класса detailspanel

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

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

источник

2015-01-29 11:13:10

Или в качестве альтернативы вы можете попробовать это:

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

источник

2015-01-29 11:15:09 Aaron

Глядя на высоте contactpanel которая 60px и у вас есть div с iddetailspanel. Простая прокладка отрегулирует detailspanel в center.

попробуйте с padding : 10px, который отрегулирует detailspanel в центр.

Для регулировки с полным контролем элементов на странице. установите для себя div'sname и email на высоту 15px без каких-либо padding и margin: 10px, это сделает трюк. Поскольку margin-bottom и margin-top из name и email div сбой.

источник

2015-01-29 11:22:23 saikumarm

Добавить позицию абсолютная для div.detailspanel, как показано ниже:

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

Для справки проверки этой скрипки: http://jsfiddle.net/hu6wq7km/9/

источник

2015-01-29 11:37:48 rJ7

Как я могу центрировать div внутри div?

ответ

Смежные вопросы