4

我正在尝试为我的网站创建一个纯 html 和 css facebook 图标。我认为我大部分都做得相当好。但是，当我添加到 HTML 的链接时，HTML 中的文本“f”不再在 div 中水平居中。

HTML

<div class="facebook" alt="facebook"><a href="#">f</a></div>

CSS

.facebook {
    font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; 
    height: 40px; 
    width: 40px;
    border-radius: 50%;
    background: #1f3060;
    background-position: center;
    font-size:22px;
    text-shadow: 1px 1px #000000;
    transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -webkit-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-timing-function: ease-in;
    -moz-transition-timing-function: ease-in;
    -webkit-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    -webkit-transform:rotate(-360deg);
    -moz-transform:rotate(-360deg);
    -o-transform:rotate(-360deg);
    transform:rotate(-360deg);
}

.facebook a {
    color: white;
    vertical-align: bottom;
    text-align: center;
    line-height: 40px;
    padding-right: 20px;
    text-decoration: none;
}

.facebook:hover {
    background: #3a5998;
    transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-timing-function: ease-in;
    -moz-transition-timing-function: ease-in;
    -webkit-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    transform:rotate(0deg);
}

这是一个指向我创建的jsfiddle的链接，其中包含我的问题。

（没有我的网站的其余部分，这有我的问题，因为我知道那不是问题。我已经检查过了）

如果您对如何解决此问题有任何想法，我将不胜感激。谢谢你。

4

4 回答 4

9

使用这些属性.facebook 

display:block;
text-align:center;
于 2013-01-13T03:02:44.053 回答
5

取出facebook a元素上的 padding-righttext-align: center;并向容器添加 a.facebook应该注意使文本居中。

http://jsfiddle.net/M2Dx8/16/

于 2013-01-13T01:08:08.333 回答
1

您可以尝试从 .facebook中添加display: block;和删除a。padding这将使“f”居中。

于 2013-01-13T01:08:07.460 回答
0

尝试添加 text-align:center; 到 CSS 中的.facebook部分，它必须解决您的问题。

于 2013-01-13T01:07:21.063 回答