垂直居中CSS ::內容後帶浮動，父DIV

Question

當::after僞元素應用float: right時，如何將由::after僞元素生成的內容垂直居中在父元素內部？

我有以下CSS定義：

.label-dot::after, .label-dot-1::after { 
    content: ""; 
    border-radius: 50%; 
    display: inline-block; 
    float: right; 
    height: 10px; 
    width: 10px; } 

.label-dot-1::after { 
    background-color: #66c2a5; } 

...它適用於以下（測試用例）HTML：

<div style="width: 500px; background-color: red;"> 
    <div class="label-dot-1">Neato</div> 
</div> 

一個測試代碼的jsfiddle可以在這裏找到：http://jsfiddle.net/EvilClosetMonkey/jR9sV/

請注意，右側的綠色圓點對齊div的頂部以及右側。我怎樣才能讓點對齊div的垂直中心，就像文本是？

更新信息的附加

兩個部分：

1. 我知道父div的height。當我發佈我的問題時，我忘了我做了。 :)
2. 我不需要需要使用float，但我確實需要'點'對齊到右邊（每個評論以下）。

一個新的小提琴在這裏，與高度更新：http://jsfiddle.net/EvilClosetMonkey/jR9sV/2/

Answer 1

通過應用position:relative與已知的高度盛大父元素，我們屆時可到pseudo相對於其絕對的位置，如下：

#container { 
position:relative; 
height:20px; 
width: 500px; 
background-color: red; 
} 
.label-dot-1{ 

} 
.label-dot-1::after { 
content:""; 
position:absolute; 
right:0; 
top:5px; /* (20px - 10px)/2 */ 
border-radius: 50%; 
display: inline-block; 
height: 10px; 
width: 10px; 
background-color: #66c2a5; 
} 

Updated JSFiddle

更新

以下內容將pseudo相對於其未知高度的父對象相對齊。它部分使用垂直居中的absolute centering technique，然後依靠css3 calc()函數進行右對齊。

#container { 
width: 500px; 
background-color: red; 
} 
.label-dot-1{ 
position:relative; 
} 
.label-dot-1::after { 
content:""; 
position:absolute; 
top:0; 
right:0; 
bottom:0; 
left:0; 
margin:auto calc(100% - 10px); 
height: 10px; 
width: 10px; 
border-radius: 50%; 
background-color: #66c2a5; 
} 

JSFiddle Demo

Answer 2

簡單添加

position:absolute; top:50%; 

到.label-dot-1::after，然後設置要被相對定位父

http://jsfiddle.net/FquzF/例如