位置表内容垂直

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。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;