Как лучше можно реализовать данный блок?

Question

[axblue]

Здравствуйте. Есть блок вида:

Как сделать заголовок ровно по центру страницы, а кнопку по правому краю? Пока на ум только position:absolute приходит для кнопки, но это не вариант для меня(некрасиво это). Флоутами если делать то заголовок не по центру будет... Вроде легко, но что-то на ум не приходит, толи от усталости уже..

<div class="page-content__head">
      <h1 class="page-content__head-title">Kreditləşmə</h1>
      <a href="#" class="btn btn--green">Kredit hesablamaq</a>
    </div>

Answer 1

[Роман Ямчук]

Флексбокс! Стильно, модно, молодежно!

.page-content__head {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

Comments

[axblue]

как раз на нем и делаю всю верстку) Спасибо, щас попробую.

[axblue]

Что не получается. Он все элементы смещает(заголовок и кнопку). А нужен заголовок по центру

[axblue]

В любом случае флекс врат ли подойдет, ибо нужен заголовок по центру от ширины всей страницы, а так будет минус блок с кнопкой, а это уже не центр страницы всей.

Answer 2

[Camaro67]

А чем позиционирование не устраивает? Вполне нормальное решение.

.page-content__head {
  position: relative;
}

.btn {
  position: absolute;
  top: 0;
  right: 0;
}

Comments

[axblue]

НЕ знаю, не люблю абсолют вешать на такие элементы, это личное, но придется наверное.

[Camaro67]

axblue,

Флоутами если делать то заголовок не по центру будет

Как по мне, так float куда хуже, чем позиционирование. Благо их сейчас можно не использовать т.к. есть флексы. Конечно если не требуется поддержка старых браузеров.

[axblue]

Camaro67, Да поэтому и задал вопрос здесь. При абсолютном позиционирование ещё плохо то что он будет по вертикали не по центру по отношении к заголовку..

Answer 3

[SuperToster]

Пожалуйста https://jsfiddle.net/muf8c244/

Но лучше переходите на flex.

Comments

[axblue]

Я флексом и хотел, но что-то поигрался и ничего не выходило..

[SuperToster]

Например так: https://jsfiddle.net/2fbo2vjy/
Всё то же самое, указываете flex-basis и отступ от границы элемента (margin).