Как мне создать горизонтальную линию div, некоторые из которых текут вправо?Все div должны быть выровнены по вертикали

Question

Возможно, будет проще показать, чего я хотел бы достичь на примере:

header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: lightgray;
    border-bottom: 5px solid gray;
}

header > div {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    padding: 10px;
}

<header>
    <div><h1>Title</h1></div>
    <div>Blah1</div>
    <div>Blah2</div>
    <div style="float: right;">Blah4</div>
    <div style="float: right;">Blah3</div>
</header>

Надеюсь, проблема ясна ... Я хочу, чтобы мои div выровнялись горизонтально в header.Я полагаю, что для этого я должен сделать div s inline-block.И это работает.

За исключением одной вещи ... Я хочу, чтобы некоторые из этих div всплыли справа, а не слева.Но тогда, независимо от того, что я делаю, эти div отказываются вертикально выравнивать их рукава по центру вмещающего контейнера.Как вы можете видеть, Blah3 и Blah4 находятся слишком далеко наверху, что выглядит ужасно.

Я рассуждал, что если я использую height: 100%, я заставлю самые правые div s быть такими же высокимив качестве кодировки header, а затем, если я использую vertical-align: middle, я буду располагать текст вертикально в, ну, в середине;но, как вы можете видеть, это не тот случай.

Как это исправить?

Answer 1

Я бы скорее предложил вам решение Flexbox :

header {
  display: flex; /* displays flex-items (children) inline */
  align-items: center; /* centers them vertically */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: lightgray;
  border-bottom: 5px solid gray;
}

header > div {padding: 10px}

header > div:nth-child(3) {margin-right: auto} /* pushes the other two siblings far right to the end of the row */

<header>
  <div><h1>Title</h1></div>
  <div>Blah1</div>
  <div>Blah2</div>
  <div>Blah4</div>
  <div>Blah3</div>
</header>