html - 需要帮助设计图标

Question

我正在尝试设置图标的样式，但我遇到了一点麻烦，因为图标的样式将 border-top 和 border-bottom 属性推到了不合适的位置。正如您在下面看到的。任何帮助将不胜感激，它可能是我在 css 中忽略的东西我不确定。

我正在努力实现以下目标:

我的代码是:

h3{
    padding:0;
    margin:0;
    font:'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
    color: #6b6b6b;
    margin-left: 30%;
        overflow: hidden;

}

/*order icon*/
a#order{
    background: url("./Images/bell1.png") no-repeat !important;
    display: inline-block;
      vertical-align: middle;
    float:left;
    margin-left: 20%;
    background-position: 0 0;
    

 <a  id="order" class="header" href="#" onclick="toggleVisibility('Order');"><h3 id="order">Orders</h3></a>
            <div id="Order" style="display: none;">    

Answer 1

试试这个。这有点不合常规，但它对导航元素非常有效。为了可读性和现代网络，我重新组织了您的 html 和 css。 translateY 不能在低于 IE9 的情况下工作，所以如果你要走那条路，坚持垂直对齐。

http://jsfiddle.net/calebswank/qm4yqL8b/

<a id="order" class="header" href="#" onclick="toggleVisibility('Order');">
 <h3>Orders</h3>
</a>