如何中心锚标记水平的CSS [英] how to center anchor tag horizontally css

问题描述

我想创建一个自己的网站纯HTML和CSS Facebook的图标。我想我已经大部分完成的还算不错。然而，当我添加了一个链接到HTML，HTML中的文字F不再水平的div中居中。

I am trying to create a pure html and css facebook icon for a my website. I think I have most of it done reasonably well. However, when I added a link to the HTML, the text "f" in the HTML was no longer centered horizontally within the 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 我与我的问题而产生的。

Here is a link to a jsfiddle I created with my problem in it.

（这有没有我的网站的其余部分我的问题，因为我不知道这个问题。我已经检查多数民众赞成）

(This has my problem without the rest of my website, because I know thats not the problem. I have checked)

如果您对如何解决这一问题，我将不胜AP preciate任何的想法。谢谢你。

If you have any idea on how to fix this, I would greatly appreciate it. Thank you.

推荐答案

取出 Facebook上的元素的填充右，并添加文本对齐：中心; 到容器 .facebook 应围绕文本的护理

Take out the padding-right on the facebook a element and add a text-align: center; to the container .facebook should take care of centering the text.

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

这篇关于如何中心锚标记水平的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！