位置表內容垂直

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>