Всем привет!
.search-menu.menu-panel-results, .search-menu-container.menu-panel-results {
width: 600px;
left: 150px;
}
.floating-search-input .search-banner-inner.wrap .search-menu .search-icon {
left: 150px;
}
Я написал этот код, и когда добавляю его в поле CSS, всё выглядит так, как я хочу, но у других пользователей — нет.
Можете помочь, пожалуйста?
https://pvpfarm.com
Привет, отзывчивые друзья.
Как мне это отцентрировать?
Это выглядит по-разному при входе в систему. Это выглядит по-разному после входа в систему.
Я хочу, чтобы это всегда оставалось ровно посередине и в том же положении.
Спасибо. 
Просто предполагаю, но смещение, похоже, вызвано разницей в ширине кнопки входа по сравнению с кнопкой меню поиска и аватаром.
Да, Лилли, это именно та проблема. Можем ли мы найти решение?
Это та же проблема, с которой вы столкнулись в этой теме:
https://meta.discourse.org/t/how-can-i-center-the-search/301726?u=moin
почему вы показываете строку поиска анонимным пользователям? ладно, я уже там. Я думал, что клик по строке поиска откроет модальное окно входа, но оно позволяет мне искать… быстро осматриваюсь.
Я обнаружил множество ошибок в Chrome на моём MacBook. Кнопки в заголовке открывают не те меню, а попытка закрыть боковую панель чата открывает гамбургер-меню и так далее.
У меня нет точного ответа, почему это происходит — возможно, есть конфликтующие SCSS-стили. Тем не менее, вы и ваш форум продвигаетесь вперёд 
— не теряйте духа. По сравнению с тем, как всё выглядело, когда вы только начали, ваш сайт стал намного лучше. CSS — дело тонкое, особенно если у вас нет опыта, и всё может быстро запутаться, если не быть осторожным. Просто не спешите и ознакомьтесь с некоторыми темами базы знаний в канале Documentation. Я думаю, что если вы упростите и оптимизируете часть своего CSS, то сможете разобраться с проблемами.
Я сейчас очень удивлён 
, у меня тоже нет такой проблемы. Возможно, эта проблема возникает потому, что вы перевели язык сайта? Основной язык сайта — турецкий.
Я скоро проверю это на своём MacBook.
Мне бы очень хотелось упростить код, но это было очень сложно.
Я могу дать вам права администратора. Вы сможете увидеть, насколько всё запутано. 
@media screen and (min-width:640px){
.d-header .home-logo-wrapper-outlet,
.d-header .panel{
width:240px;
}
}
Кстати, этот код решил мою проблему. Но выглядит это не очень хорошо.
Содержимое заголовка и содержимое страницы центрируются независимо друг от друга, поэтому, например, если в заголовке справа или слева больше контента, центр заголовка будет смещаться.
Вот несколько иллюстраций этого: здесь «центр» заголовка меняется в зависимости от количества контента справа:
Не существует простого способа гарантировать, что центр заголовка и центр содержимого страницы всегда совпадают, особенно учитывая, что ширина содержимого заголовка может меняться (из-за переводов, количества кнопок и т. д.).
Это работает, потому что контент слева (логотип) теперь имеет ту же ширину, что и контент справа (контейнер кнопок). Вам потребуется отдельный фрагмент CSS для класса .anon (неавторизованные пользователи), поскольку справа отображаются разные кнопки. Как вы заметили, переводы также изменят размер кнопок, что повлияет на выравнивание.
Спасибо @awesomerobot, спасибо за объяснение со скриншотами. Мне было очень понятно. 
@media screen and (min-width:640px){
.d-header .panel{
margin-left:-66px;
}
}
Я тоже пробую вот так, но это как змейка в Тетрисе. Они гоняются друг за другом по экрану.
Решение
/* центрирование строки поиска */
@media screen and (min-width:640px){
html:not(.anon) .d-header .panel {
margin-left: 95px;
}
}
.floating-search-input-wrapper {
margin-right: -35px;
}
/* центрирование строки поиска */
Вы можете подстроить значения в пикселях в соответствии со своими потребностями.