1

フォントアイコンを縦に揃えようとしています。試してみvertical-align: middleましたが、常にわずかな位置合わせの違いが生じます。次の例には、アイコンを使用する 2 つの異なる方法があり、正しく配置されていません。

div {
  font-size: 50px;
  font-family: helvetica, arial, sans-serif;
  text-transform: uppercase;
  background: yellow;
}

.cart {
  margin-top: 20px;
}

.cart:before {
  font-family: "fanatic-icons" !important;
  font-weight: normal;
  content: "b";
  margin-right: 5px;
  vertical-align: middle;
  text-transform: none;
}
<link rel="stylesheet" type="text/css" href="https://fontastic.s3.amazonaws.com/PxvnwqrSXE7pXNDNDqGp4i/icons.css">

<div>
  <span class="icon icon-shopping-cart"></span> Shopping Cart
</div>

<div class="cart">
  Shopping Cart
</div>

例

4

6 に答える 6

0

上記の代わりに、説明したスパン要素メソッドを使用して、スパンタグを親の div 要素に対して相対的に配置できます。

お気に入り：

div{
 position: relative;
}    
span.icon-shopping-cart{
 position: relative;
 top: 5px;
}
于 2015-02-25T10:17:08.860 に答える
0

line-height属性を使ってみる

0.5,1,1.5などに設定できます

于 2015-02-25T10:06:50.540 に答える