Поместите содержимое div в центр

У меня есть два блока выбора и панель кнопок между ними для перемещения опций туда и обратно. Прямо сейчас это выглядит как первое изображение ниже, я хочу разместить кнопки вертикально в центре с списков, как на втором изображении нижеПоместите содержимое div в центр

enter image description here

JSFiddle here

Любые помогают/указатели будут будь велика.

источник

2012-05-29 Johnbabu Koppolu

Будет ли выбор фиксированной или динамической высоты? – Andre

@Andre - высота динамическая, в моем случае размер задается через java-скрипт –

Вы можете использовать таблицы css. Во-первых, вам нужно это подмостки:

.table { display: table; } 
.row { display: table-row; } 
.cell { display: table-cell; } 

[...] 

<div class="table"> 
    <div class="row"> 
     <div class="cell">Lorem [...]</div> 
     [...] 
    </div> 
</div>

Далее, вертикальное расположение ячейки определяется вертикальной выравнивать: верхняя | нижняя | средний | базовый. Под капотом: ячейки, которые имеют меньшую высоту, чем его ряд, получают верхнее или нижнее дополнение автоматически. При этом ячейка и строка равны единице.

Посмотрите обновленный код: http://jsfiddle.net/Fq93w/21/. И вот обходной путь для IE < = 7:

#rightListDiv, #controlPanel, #LeftListDiv { 
    display: inline; 
    zoom: 1; 
}

источник

2012-05-29 17:17:10

Спасибо большое! просто хотел сделать это с помощью CSS только, и это то, что я искал ... время, чтобы читать на css-таблицах для меня:) ... но я могу просто использовать ваше решение на данный момент, это выглядит великолепно. Еще раз спасибо. –

margin-top Добавить со значением в соответствии с вашими потребностями, см обновленное скрипку:

http://jsfiddle.net/Fq93w/11/

источник

2012-05-29 16:38:05 Sarfraz

С этим подходом. Если я увеличу свой размер списка, мне придется изменить маржу, а также выровнять кнопки, можно ли это сделать в более общем виде без жесткого кодирования поля? –

@johnbk: Я не думаю о другом решении, кроме использования JavaScript. В этом случае высота окна выбора будет обнаружена и на основе этого вам нужно будет установить свойство margin-top. – Sarfraz

margin: 0 auto; но я предпочитаю решение @ kay-o-pele –

Возможно оберточной Evrything внутри одного DIV и дает маржу-топ в% для ControlPanel DIV, может работать для вас.

источник

2012-05-29 16:48:42 Shreedhar

Опять же, это будет проблема, когда мой размер списка будет динамически установлен, мне пришлось бы перенастроить margin-top и установить его через javascript –

@johnbk, тогда использование javascript будет эффективным способом как сказал сарфраз. – Shreedhar

Поместите содержимое div в центр

ответ

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