我正在尝试为我的网站创建一个纯html和css facebook图标.我想我的大部分时间都做得相当好.但是,当我添加 HTML链接时, HTML中的文本“f”不再在div中水平居中. HTML div class="facebook" alt="faceb
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的链接.
(这有我的问题没有我的网站的其余部分,因为我知道这不是问题.我已经检查过)
如果你对如何解决这个问题有任何想法,我将不胜感激.谢谢.
取出facebook a元素上的padding-right并添加text-align:center;容器.facebook应该注意文本的中心.http://jsfiddle.net/M2Dx8/16/