Выровнять по вертикали составное содержимое

Question

У меня есть div, который действует как всплывающая подсказка, когда мышь наводит курсор на ссылку. Концептуально он имеет 5 строк: строку текста, кнопку, разделитель, строку текста, кнопку.

 ----------------
|   Click here:  |
|    [Button1]   |
|   ----------   |
| Or Click Here: |
|    [Button2]   |
 -------  -------
        \/

Каждая строка в настоящее время является div с фоном изображения для своего содержимого, и все это работает нормально. Но теперь нам нужно условно отобразить комбинации верхней и нижней кнопок. Как я могу сохранить видимые элементы по центру во всплывающем элементе div, когда «строки» отображаются или скрыты? У всплывающего элемента div должен быть минимум 20px отступ в верхней части.

 ----------------  ----------------
|                ||                |
| Or Click Here: ||   Click here:  |
|    [Button2]   ||    [Button1]   |
|                ||                |
|                ||                |
 -------  -------  -------  -------
        \/                \/

Я прочитал это: http://www.boutell.com/newfaq/creating/centervertically.html, но я не уверен, как применить его к нескольким сложенным содержимым.

Answer 1

Поскольку я уже использую javascript для отображения или скрытия элементов, я решил использовать его также для настройки выравнивания. Сначала я попытался использовать JavaScript, чтобы разумно пересчитать верхнее поле для центрирования контента для меня. Из-за игнорирования IE стандартов, это слишком запутанно. Поэтому я в конечном итоге использовал javascript, чтобы поменять классы css на div, чтобы настроить верхние и нижние поля и сделать так, чтобы они выглядели по центру. Div уже сложены, поэтому, если я удаляю верхний div, остальные сдвигаются вверх. Таким образом, класс, в котором я меняюсь, просто добавляет соответствующее верхнее поле, чтобы сместить верхний элемент div вниз к центру.

Answer 2

попробуйте этот стиль для контейнера div:

<div style='display:table-cell; vertical-align:middle'></div>