Пример тестового сайта: [1] http://test.hauptstadtventures.com
Поскольку [1] является дочерней темой Avada Fusion [2] https://avada.theme -fusion.com , один изСамые популярные темы, я надеюсь, что это актуально и для других разработчиков.
У меня есть следующая проблема: пункт меню 2 должен быть центрирован между логотипом и соседним элементом 1. Должна применяться та же логикак пункту 3.
| [элемент 1] <-----------> [элемент 2] <-----------> [ЛОГОТИП] <-----------> [пункты 3] <-----------> [пункт 4] |
Этотекущее состояние как есть.Элементы 2 и 3 не центрированы между логотипом и соседними элементами1 и справа от пункта 4). Логотип находится в центре окна / содержимого, что означает: он не перемещается так же, как центральный элемент [ОСНОВНЫЕ УСЛУГИ] в скрипке верхнего ответа [3] by @ Danield. Элементы 1 выровнены по левому краю, а элементы 4 - по правому краю. Элементы 2 и 3 плавают между логотипом и соседними элементами, всегда по центру, принимая во внимание длину текста привязки. Элементы 2 и 3 остаются в центре при изменении ширины окна. Нет изменений в дереве HTML / DOM, нет решений для позиционирования javascript / jQuery, я ищу элегантный CSS-единственное решение, которое можно применить в [1].Я знаю, что уже есть потенциально мешающие правила CSS, пожалуйста, рассмотрите это как часть проблемы. Среда разработки:
- Версия Avada: 5.7.1
- WP версия: 4.9.8
Я взглянул на следующие подходы, устал их реализовывать, но пока безуспешно:
[3]
Как равномерно и полностью растянуть фиксированное количество элементов горизонтальной навигации по указанному контейнеру
[4] Как создать горизонтальное меню, в котором каждый элемент имеет одинаковую ширину и интервал между ними?
Я также разработал решение jQuery, которое позиционирует левые значения CSS для элементов 2 и 3, но должно быть элегантное решение CSS.Правильно?
Заранее спасибо!