div中的垂直中心a <b>元素</b>

Question

如何将div中的标记名称垂直居中。

<div id="playerlist">
    <div class="opponents_list"><b id="opponent_list_bold_name">bob</b>
    </div>
    <div class="opponents_list"><b id="opponent_list_bold_name">harri</b>
    </div>
    <div class="opponents_list"><b id="opponent_list_bold_name">harri2</b>
    </div>
    <div class="opponents_list"><b id="opponent_list_bold_name">kaleeem</b>
    </div>
    <div class="opponents_list"><b id="opponent_list_bold_name">nehaaa</b>
    </div>
    <div class="opponents_list"><b id="opponent_list_bold_name">nitiisha</b>
    </div>
    <div class="opponents_list"><b id="opponent_list_bold_name">rangi</b>
    </div>
    <div class="opponents_list"><b id="opponent_list_bold_name">tom</b>
    </div>
</div>

.opponents_list {
    width: 100vw;
    height: 3em;
    margin: 0.1em auto;
    background: #666;
    vertical-align:middle;
}
.opponent_list_bold_name {
    vertical-align:middle;
}

上述代码的小提琴位于http://jsfiddle.net/cvsn8cu8/。使用css propery vertical-align：middle; 无法正常工作

Answer 1

您拥有相同的ID而不是类。使用与高度相同的线高

.opponents_list {
  width: 100vw;
  height: 3em;
  margin: 0.1em auto;
  background: #666;
  vertical-align: middle;
}
.opponent_list_bold_name {
  line-height: 3em;
}

<div id="playerlist">
  <div class="opponents_list"><b class="opponent_list_bold_name">bob</b>
  </div>
  <div class="opponents_list"><b class="opponent_list_bold_name">harri</b>
  </div>
  <div class="opponents_list"><b class="opponent_list_bold_name">harri2</b>
  </div>
  <div class="opponents_list"><b class="opponent_list_bold_name">kaleeem</b>
  </div>
  <div class="opponents_list"><b class="opponent_list_bold_name">nehaaa</b>
  </div>
  <div class="opponents_list"><b class="opponent_list_bold_name">nitiisha</b>
  </div>
  <div class="opponents_list"><b class="opponent_list_bold_name">rangi</b>
  </div>
  <div class="opponents_list"><b class="opponent_list_bold_name">tom</b>
  </div>
</div>

替代选项

您可以将父级设置为display:table，将b设置为display:table-cell，然后垂直对齐

Jfiddle Demo

Answer 2

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

<div id="playerlist">
    <div class="opponents_list"><b id="opponent_list_bold_name">bob</b>
    </div>
    <div class="opponents_list"><b id="opponent_list_bold_name">harri</b>
    </div>
    <div class="opponents_list"><b id="opponent_list_bold_name">harri2</b>
    </div>
    <div class="opponents_list"><b id="opponent_list_bold_name">kaleeem</b>
    </div>
    <div class="opponents_list"><b id="opponent_list_bold_name">nehaaa</b>
    </div>
    <div class="opponents_list"><b id="opponent_list_bold_name">nitiisha</b>
    </div>
    <div class="opponents_list"><b id="opponent_list_bold_name">rangi</b>
    </div>
    <div class="opponents_list"><b id="opponent_list_bold_name">tom</b>
    </div>
</div>

     

Answer 3

设置line-height：

.opponents_list {
  /* your code */

  line-height: 3em;
}

Answer 4

提及ID必须是唯一的。请改用类。您也可以使用display: table：

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

<div id="playerlist">
  <div class="opponents_list"><b class="opponent_list_bold_name">bob</b>
  </div>
  <div class="opponents_list"><b class="opponent_list_bold_name">harri</b>
  </div>
  <div class="opponents_list"><b class="opponent_list_bold_name">harri2</b>
  </div>
  <div class="opponents_list"><b class="opponent_list_bold_name">kaleeem</b>
  </div>
  <div class="opponents_list"><b class="opponent_list_bold_name">nehaaa</b>
  </div>
  <div class="opponents_list"><b class="opponent_list_bold_name">nitiisha</b>
  </div>
  <div class="opponents_list"><b class="opponent_list_bold_name">rangi</b>
  </div>
  <div class="opponents_list"><b class="opponent_list_bold_name">tom</b>
  </div>
</div>