位置表內容垂直

我創建了一個表格並在列中放置了一個圓圈以顯示某人是在線還是離線。位置表內容垂直

用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

位置表內容垂直

回答

相關問題