纯CSS社交媒体图标高度问题和位置问题

Question

我在下面创建一个小提琴。第一个图标中的G未正确定位。我需要像其他两个图标一样垂直居中。看起来所有3个图标都在底部被切断。我一直在搞乱这个太久了，似乎无法解决这两个问题。非常感谢任何帮助。

HTML

<div class="con">
    <ul>
        <li class="gp"><a href="" title="Google Plus">Google</a>
        </li>
        <li class="fb"><a href="" title="Facebook">Facebook</a>
        </li>
        <li class="tw"><a href="" title="Twitter">Twitter</a>
        </li>
    </ul>
</div>

CSS

.con {
    position:relative;
    left:180px;
}
.con ul {
    list-style:none;
    padding:0;
    margin:0;
    overflow:hidden;
    font:0.875em/1 Arial, sans-serif;
}
.con ul li {
    float:left;
    width:36px;
    height:36px;
    margin:5px 6px 0 0;
}
.con ul li a {
    display:block;
    width:36px;
    height:36px;
    overflow:hidden;
    border:1px solid transparent;
    line-height:36px;
    text-decoration:none;
    text-shadow:0 -1px 0 rgba(0, 0, 0, 0.5);
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
.con ul li a:hover, .con ul li a:focus, .con ul li a:active {
    opacity:0.9;
    border-color:#000;
}
.gp a {
    position:relative;
    border-color:#26478d;
    text-transform:lowercase;
    text-indent:10px;
    letter-spacing:10px;
    font:34px Georgia, Times New Roman, Times, serif;
    line-height:36px;
    color:#fff;
    background:#1e3c7f;
    -moz-box-shadow:0 0 4px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow:0 0 4px rgba(0, 0, 0, 0.4);
    box-shadow:0 0 4px rgba(0, 0, 0, 0.4);
    background:-webkit-gradient(linear, left top, left bottom, from(#447aec), to(#1e3c7f));
    background:-moz-linear-gradient(top, #447aec, #1e3c7f);
}
.fb a {
    position:relative;
    border-color:#3c5a98;
    text-transform:lowercase;
    text-indent:18px;
    letter-spacing:10px;
    font-weight:bold;
    font-size:34px;
    line-height:36px;
    color:#fff;
    background:#3c5a98;
    -moz-box-shadow:0 0 4px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow:0 0 4px rgba(0, 0, 0, 0.4);
    box-shadow:0 0 4px rgba(0, 0, 0, 0.4);
}
.tw a {
    position:relative;
    border-color:#a8eaec;
    text-transform:lowercase;
    text-indent:12px;
    letter-spacing:10px;
    font:bold 34px Tahoma, sans-serif;
    line-height:36px;
    color:#76DDF8;
    background:#daf6f7;
    -moz-box-shadow:0 0 4px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow:0 0 4px rgba(0, 0, 0, 0.4);
    box-shadow:0 0 4px rgba(0, 0, 0, 0.4);
    background:-webkit-gradient(linear,left top,left bottom,from(#dbf7f8), to(#88e1e6));
    background:-moz-linear-gradient(top,#dbf7f8,#88e1e6);
}

http://jsfiddle.net/cc5cQ/

Answer 1

令人钦佩您正在尝试做的事情 - 但您需要为每个图标应用一些单独的样式才能实现此目标。

使用不同的字体，以及不同字符高度不同的事实会使这一点变得棘手，需要通过眼睛进行一些手动调整。

我建议为每个图标应用不同的行高样式，直到获得所需的效果。请记住，虽然每个平台/浏览器可能会略微不同地渲染这些字体，因此它可能不是完美的跨浏览器。

（刚刚看过mac和pc，特别是g的渲染方式有很多不同。）

祝你好运。

Answer 2

为了解决你的图标最后被剪切，我只想将高度值更改为比现在更高的值。例如，这有效：http://jsfiddle.net/cc5cQ/1/

.con ul li {
    float:left;
    width:36px;
    height:45px;
    margin:5px 6px 0 0;
}

Answer 3

我添加了一个样式规则：

.gp a h2{margin-top:-7px; font:34px georgia, Times New Roman, Times, serif;}

我已将.gp a文本包围在<h2>内。 我已经修改了.con ul li ......就像这样。

{
    float:left;
    width:36px;
    height:36px;
    margin:5px 6px /*added by me*/10px 0;
}

现在看起来更好。

fiddle此处。