Question

笑脸（点击链接时）有点朝向底部（相对于黑匣子），如下所示：

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/

CSS垂直文本居中

2 个答案: