Как я могу горизонтально центрировать div с переменной шириной внутри другого div со специальным смещением от вершины (или с вертикальной ориентацией)? Дополнительным условием является то, что только видимая часть div должна перехватывать события мыши - это ограничивает некоторые из параметров.
+--------------+
| outer div +
| <innner> +
+--------------+
inner
содержит элементы, доступные клику, и должна находиться в верхней части порядка укладки. outer div
доступен для интерактивного просмотра, поэтому область вокруг inner
должна передавать события мыши в базовый div. inner
- переменная ширина. inner
должен иметь некоторый смещение от вершины outer
.
Я знаю, что есть много связанных вопросов центрирования, но аспект событий мыши здесь делает это другим.
Скажем, у вас есть внешний div с внешним классом, а внутри него есть еще один div, имеющий класс = "внутренний". Центрирование может быть достигнуто с помощью css:
.outer {
height: 100px;
width: 200px;
line-height: 100px;
border: 1px solid red;
text-align: center;
}
.inner {
height: 50px;
line-height: 50px;
display: inline-block;
vertical-align: middle;
text-align: center;
border: 1px solid blue;
}
Я добавил события щелчка в внешний div и для кнопки внутри внутреннего div. Щелчок кнопки будет распространяться на внешний div по умолчанию.