css - float :right CSS property changes the vertically center position of the button inside div

Question

<button>以下代码中的元素垂直居中，当它不是右对齐时使用 CSS float:right属性(property)。

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;
}

fiddle 是here .
如何使按钮既右对齐又垂直居中？

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>