html - 垂直放置表格内容

Question

我创建了一个表格并在一列中放置了一个圆圈以显示某人是在线还是离线。

用 CSS 创建的圆圈。

我想垂直对齐中间的圆，我试过了:

vertical-algin: middle;
display: table-cell;

但是没有任何反应。

我的 CSS 代码:

.circle {
    width: 10px;
    height: 10px;;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.online {
    background: #5CB85C;
}
.offline {
    background: #D9534F;
}

http://imgur.com/945mp6n

http://jsfiddle.net/x0eqyjrn

Answer 1

您可以改用 CSS3 灵活的框布局。只是 align-items: center 将垂直对齐状态圈。无需设置 vertical-align。

.container {
  height: 30px;
  background: lightgray;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container:nth-child(odd) {
  background: white;
}
.circle {
  width: 10px;
  height: 10px;
  border-radius: 5px;
}
.online {
  background: #5CB85C;
}
.offline {
  background: #D9534F;
}

<div class="container">
  <div class="circle online">
  </div>
</div>

<div class="container">
  <div class="circle offline">
  </div>
</div>

<div class="container">
  <div class="circle offline">
  </div>
</div>

<div class="container">
  <div class="circle online">
  </div>
</div>