改行してある２行の文の横にボタンを配置したい css

Question

初心者です。質問させてください。
・やりたいこと
改行してある２行の文の左右にボタンを配置したい
理想↓

・困っていること
ボタンは表示できているが文の前後に表示されていてバランスが悪くなっている
現状↓
![
・質問
改行されている文の左右に上下中央揃えの配置の仕方を教えていただけないでしょうか？

<table>
  <tr>
    <td>
      <%= link_to "←", "#", class: "btn btn-xs btn-primary%>
      【2019年11月】<br>時間管理表
      <%= link_to "→", "#", class: "btn btn-xs btn-primary" %>
    </td>
  </tr>
</table>

Answer 1

tdの中身をdiv等で囲んで、
その囲んだ要素に対してdisplay:flex;とalign-items:center;を使うのはいかがでしょうか。

<td>
  <div>
  <%= link_to "←", "#", class: "btn btn-xs btn-primary%>
  【2019年11月】<br>時間管理表
  <%= link_to "→", "#", class: "btn btn-xs btn-primary" %>
  </div>
</td>

div{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

※適宜class名を付けて利用してください。

Comments

[ikt_erk122]

回答ありがとうございました！
理想の形になったし、いい勉強になりました。
自分で少し変更した点はcssの「 justify-content: space-between; 」だとボタンが端にいき過ぎたので「 justify-content: space-evenly; 」としてボタンの幅を狭めました。