Хорошо, так что это, в основном, обычный вопрос "как вертикально центрировать с помощью CSS", но с некоторыми уловками.
Нет Javascript.Только HTML и CSS.CSS3 хорош, если он достаточно хорошо поддерживается современными браузерами.
Содержание элемента и, следовательно, высота не известны.Это может быть от нескольких десятков до нескольких сотен пикселей.В будущем у меня может быть даже сценарий добавления и удаления элементов внутри, поэтому он может изменить высоту, когда пользователь взаимодействует с ним.
На странице есть другое содержимое - навигациябар слева и меню вверху.Они должны быть доступны.
Подход, который я использовал, заключается в методе с тремя контейнерами с использованием display: table-cell, как описано в: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html thisрешает вопросы 1 и 2, но не 3.
http://imgh.us/vcenter.jpg показывает конструкцию и проблему.Желтая коробка - самый внутренний контейнер.Красные и зеленые пунктирные рамки вокруг всей страницы (которые стали несколько размытыми из-за кодирования JPEG) - это крайний и средний контейнеры соответственно.(Неверный нижний колонтитул - это отдельная проблема ...)
Проблема с этим макетом заключается в том, что внешние контейнеры покрывают всю страницу, и это делает невозможным нажатие на панель навигации, потому что она теперь«под» этими контейнерами.Z-index может переместить их вниз, но тогда становится невозможно щелкнуть что-либо внутри красного поля, потому что оно теперь «под» основным окном страницы.(XHTML допускает только один элемент внутри , поэтому я просто обернул все это в
.) Даже если два внешних контейнера имеют z-index: -100, а внутренний контейнер имеет z-index:200, по какой-то причине он все еще попадает в главное окно контента.(Я пробовал различные атрибуты позиции.)
Единственное решение, которое я видел, - это новое свойство CSS3, pointer-events, которое теоретически позволило бы мне проходить через прозрачные контейнеры так, как яожидать;однако это кажется довольно новым и еще не поддерживается большинством браузеров вне SVG, и я думаю, что у меня возникли бы те же проблемы, что и с Z-index.
Я хочу, чтобы элемент находился в центрестраница, а не центр области содержимого (т. е. игнорирование навигационных панелей при расчете позиции), поэтому размещение контейнера внутри области содержимого не является идеальным решением.(Я также использую этот стиль на странице входа, которая не имеет панелей навигации, и было бы немного странно, если бы «центрированные» элементы были центрированы относительно панели навигации, которая не всегда видна.)
Таким образом, мне нужно центрировать, без использования Javascript, элемент неизвестной высоты на странице с другим содержимым по краям, не покрывая какое-либо содержимое невидимым слоем (и, таким образом, делая его не щелкающим).