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链接。

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

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

Answer 1

将这些属性用于.facebook

display:block;
text-align:center;

Answer 2

取出facebook a元素上的填充权限并向容器text-align: center;添加.facebook，以便将文本居中。

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

Answer 3

尝试添加的文本对齐：中心; 对于CSS中的 .facebook 部分，它必须解决您的问题。

Answer 4

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

如何将锚标签水平居中css

4 个答案: