Как отцентровать вложенный блок, а соседний разместить относительно правого края?

Question

[Посторонним В.]

У меня есть тулбар, который растянут на 100% ширины body - на нём блок ссылок "Вход | Регистрация", а справа - поле поиска.
Нужно, чтобы блок "вход регистрация" был четко по центру родителя (тулбара и страницы, как следствие), а блок поиска был справа, c заданным отступом от правого края родителя (внутри него, естественно).

Ума не приложу, как это сделать. Все блоки резиновые, ширину нигде фиксировать нельзя.



Код:

<div class="header__top-panel">
        <div class="user-links">
            <a class="user-links__link" href="{{ route('login') }}">Вход</a><span class="user-links__splitter">|</span><a class="user-links__link" href="{{ route('register') }}">Регистрация</a>
        </div>

        <div class="site-search">
            <form action="{{--{{ route ('search') }}--}}" class="site_search__form">
                <input name="text" type="search" class="site_search__text-field" title="Поисковый запрос" required><input type="submit" value="" class="site_search__submit-button" size="24" maxlength="128">
            </form>
        </div>
</div>

div.user-links должен быть по центру, а div.site-search - на расстоянии 2em от правого края

Comments

[Ankhena]

Либо позиционированием,
либо добавить пустой левый блок, ширину задать всем по 33% либо симметричную для левого и правого блоков, а среднему оставшуюся. И либо флексами либо инлайнблоками.

[Посторонним В.]

Ankhena, спасибо, с тремя блоками - как раз то что нужно!

Answer 1

[Посторонним В.]

Сделал родителя display: table, и в нём три блока display: table-cell - 33, 34 и 33% ширина. В центральный засунул то что должно быть посередине и сделал выравнивание по центру, в правом разместил поиск с маргином справа. И с вертикальным выравниванием всё отлично - vertical-align работает на ура.

Comments

[Сергей Горячев]

Самое дебильное решение в 2017 году.

Answer 2

[Сергей Горячев]

https://jsfiddle.net/webirus/k7pjyruw/
Абсолютное позиционирование подойдет нормально.
При малых разрешениях все равно перестраивать нужно будет, так как не влезут.
Поэтому на планшетах или мобилках переделаешь user-links на float: left или куда-то еще.

https://jsfiddle.net/webirus/k7pjyruw/1/
Либо абсолютно кинуть правый блок, и прибить его вправо, добавив 2em, которые отступа.
В общем, оба варианта на абсолюте работает вполне корректно.
И под оба варианта нужно писать заменяющие медиа-запросы.

Comments

[Посторонним В.]

Работает. Но в первом случае высота панели схлопывается до нуля, во втором - до высоты центрального блока, и ни в одном тогда не получается выравнять элементы вертикально.

[HelpSophie]

Посторонним В., так вы media условия допишите в нужных местах, чтобы просто переносилось на разные строки, а не схлопывалось.

[Сергей Горячев]

Посторонним В., достаточно было прописать mih-height в обоих случаях. Я не пишу за тебя полностью готовый код, а просто помогаю решить "проблему". Но ты пошел самым дебильным способом.

Answer 3

[Александр]

.header__top-panel {
  text-align:center;
  position: relative;
}
.user-links {
  display:inline-block
}
.site-search {
  position: absolute;
  display: inline-block;
  right: 0;
  margin-right: 2em;
}