如何在CSS中水平居中锚点标签

Question

我正在尝试为我的网站创建一个纯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，其中包含我的问题。（这个链接只包含我的问题，没有其他网站的代码，因为我已经检查过。）

如果你有任何修复问题的想法，我会非常感激。谢谢。

- KSheehan77

---

我真的不明白为什么要重新发明轮子。http://one-div.com/pictos/facebook/ - Fabrício Matté

margin: auto会有所帮助 - http://jsfiddle.net/M2Dx8/7/ - Zoltan Toth

顺便提一下，text-align应该在容器中而不是锚元素中。然而，它仍然没有居中。 - Fabrício Matté

@FabrícioMatté，回答你的问题，我更喜欢使用自己的方法。基本上是为了测试我的技能。但显然还没有完全成功。 - KSheehan77

我明白了，抱歉。只是已经有太多社交媒体图标了。:P - Fabrício Matté

Answer 1

使用这些属性来操作 .facebook

display:block;
text-align:center;

- Rajender Joshi

Answer 2

移除 facebook a 元素上的 padding-right，将 .facebook 容器添加 text-align: center; 属性以居中文本。

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

- Fabrício Matté

Answer 3

您可以尝试在 .facebook a 中添加 display: block; 并移除 padding。这将使 "f" 居中显示。

- thomaskessel

Answer 4

尝试在CSS中的.facebook部分添加text-align:center;，这应该可以解决你的问题。

- Geronimo