float:右侧CSS属性更改div内按钮的垂直中心位置

Question

<button>当使用CSS 属性未右对齐时,以下代码中的元素是垂直居中的float:right.

HTML

---

<div class="opponents_list"><b class="opponent_list_bold_name">bob</b>
    <button class="opponent_list_button" type="button">Invite</button>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">harri</b>
    <button class="opponent_list_button" type="button">Invite</button>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">harri2</b>
    <button class="opponent_list_button" type="button">Invite</button>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">kaleeem</b>
    <button class="opponent_list_button" type="button">Invite</button>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">nehaaa</b>
    <button class="opponent_list_button" type="button">Invite</button>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">nitiisha</b>
    <button class="opponent_list_button" type="button">Invite</button>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">rangi</b>
    <button class="opponent_list_button" type="button">Invite</button>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">tom</b>
    <button class="opponent_list_button" type="button">Invite</button>
</div>

CSS

---

.opponents_list {
    width: 100vw;
    height: 3em;
    margin: 0.1em auto;
    background: #333;
}
.opponent_list_bold_name {
    line-height: 3em;
}
.opponent_list_button {
    float: right;
}

小提琴在这里.
如何使按钮右对齐和垂直居中？

Answer 1

对我来说,最好的解决方案是使用display: table技术(我在上一个问题中回答):

#playerlist {
  display: table;
  width: 100%;
}
.opponents_list {
  height: 3em;
  margin: 0.1em auto;
  background: #666;
  vertical-align: middle;
  display: table-row;
}
.opponent_list_bold_name {
  vertical-align: middle;
  display: table-cell;
  width: 100%;
}
.tableCell {
  display: table-cell;
  vertical-align: middle;
}

<div class="opponents_list"><b class="opponent_list_bold_name">bob</b>

  <div class="tableCell">
    <button class="opponent_list_button" type="button">Invite</button>
  </div>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">harri</b>

  <div class="tableCell">
    <button class="opponent_list_button" type="button">Invite</button>
  </div>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">harri2</b>

  <div class="tableCell">
    <button class="opponent_list_button" type="button">Invite</button>
  </div>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">kaleeem</b>

  <div class="tableCell">
    <button class="opponent_list_button" type="button">Invite</button>
  </div>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">nehaaa</b>

  <div class="tableCell">
    <button class="opponent_list_button" type="button">Invite</button>
  </div>
</div>