css - 垂直居中 div 内的 元素

Question

如何使 div 内的标签 names 垂直居中。

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

上述代码的 fiddle 位于 http://jsfiddle.net/cvsn8cu8/ .使用 css 属性 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