css - アンカータグを水平方向に中央揃えする方法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へのリンクです。

（これは私のウェブサイトの残りの部分なしで私の問題を抱えています、それは問題ではないことを知っているので。私はチェックしました）

これを修正する方法について何かアイデアがあれば、私はそれを大いに感謝します。ありがとうございました。

score 9 · Accepted Answer

これらのプロパティを次の目的で使用します.facebook

display:block;
text-align:center;

score 5 · Accepted Answer

要素の右側のパディングを削除し、コンテナにfacebook aを追加すると、テキストの中央に配置されます。text-align: center;.facebook

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

score 1 · Accepted Answer

.facebookからの追加display: block;と削除を試すことができます。paddingこれにより、「f」が中央に配置されます。

score 0 · Accepted Answer

text-align：center;を追加してみてください。 CSSの.facebookセクションに、問題を解決する必要があります。

css - アンカータグを水平方向に中央揃えする方法css

4 に答える 4

Related

Reference