CSS豎排文字居中

Question

笑臉（當你點擊鏈接）是向底部（相對於黑盒）一點在以下幾點：

http://jsfiddle.net/UzvWc/3/

HTML

<div id="message">:)</div> 

CSS

#message { 
    padding:0px; 
    opacity:0.7; 
    -webkit-border-radius:5px; 
    background-color:black; 
    color:white; 
    width:200px; 
    position: absolute; 
    left: 50%; 
    margin-left: -100px; 
    top: 50%; 
    margin-top: -150px; 
    text-align: center; 
    font-size: 200pt; 
    display: none; 
} 

我怎麼能有位於中心的笑臉嗎？

Answer 1

這個怎麼樣？

http://jsfiddle.net/UzvWc/5/

HTML

<div id="message">:)</div><a id="showmessage" href="#">Show smiley</a> 

CSS

#message { 
    opacity:0.7; 
    -webkit-border-radius:5px; 
    background-color:black; 
    color:white; 
    width:200px; 
    position: absolute; 
    left: 50%; 
    margin-left: -100px; 
    top: 50%; 
    margin-top: -150px; 
    text-align: center; 
    font-size: 200pt; 
    display: none; 
    padding-bottom:45px; 
} 

Answer 2

所有你需要做的就是增加一些padding-bottom。

我加了25px。必要時進行調整。

http://jsfiddle.net/jasongennaro/UzvWc/19/