вертикальное выравнивание между двумя линиями

Question

У меня проблемы с получением html для выравнивания визуально так, как я хочу.

Я получил две строки текста, за которыми следовала ссылка. Я хочу, чтобы между двумя строками была вертикальная связь, а не вторая. Помимо использования таблицы, я не уверен, как это сделать, и таблица кажется излишней для достижения sh этого.

Так что я начал с этого

<div class="(float right class)">
    Line 1<br />Line 2
    <a href="#">Link</a>
<div>

Что в итоге выглядит как это

строка 1 Линия 2 Ссылка

Затем я попробовал это, вот как я думаю, что это будет сделано

<div class="(float right class)">
    <div>Line 1<br />Line 2</div>
    <div class="(v align center class)"><a href="#">Link</div>
</div>

Однако это просто помещает ссылку на отдельной строке под текстом линии, а не рядом с ним, чтобы он выглядел так

Строка 1 Линия 2 Ссылка

Я хочу, чтобы она выглядела больше как первая, только со ссылкой, вертикально центрированной между строкой 1 и строкой 2

Answer 1

используйте для этого flexbox:

#container{
display:flex;
justify-content:center;
align-items:center;
}

<div id='container'>
<div>
    Line 1<br />Line 2
</div>
<div>
    <a href="#">Link</a>
</div>
<div>