位置表内容垂直

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

用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

来源

2015-11-03 ToyRobotic

你加保证金：0汽车;？ – Keith

@Keith他正试图垂直对齐而不是水平对齐。 –

寻求代码帮助的问题必须包含在问题本身**中重现**所需的最短代码。请参阅[**如何创建最小，完整和可验证的示例**]（http://stackoverflow.com/help/mcve） –

您可以使用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>

来源

2015-11-03 16:03:16

位置表内容垂直

回答

相关问题