0

私は以前にこれを尋ねましたが、それを解決することができなかったので、もう一度尋ねます。

垂直スプライトのアイコン（左側）をテキスト（右側）に揃えようとしています。アイコンとテキストのサイズに関係なく、テキストとアイコンの下部の両方を揃えたいです。つまり、テキストはh1またはh5にすることができます。アイコンのサイズは25pxのままほぼ同じです。

現在、以下のcssを使用しています。

.icons1 {
  padding-left:40px;
  background: transparent url(icons1.png) no-repeat scroll left center;
  overflow: hidden; 
}

.tree_icon {
  background-position: -15px -12px; 
}

<div>
  <h1><span class="icons1 tree_icon"></span>Big header</h1>
</div>

しかし、アイコンの背景の位置をいじらなければ、アイコンを右側のテキストに合わせることができません。理想的には、それを行わず、隣のテキストサイズに関係なく、同じアイコンのcssクラスで使用するだけです。

4

2 に答える 2

3

代わりに、「icons1tree_icon」クラスをh1に配置することができます。そうすれば、そこに余分なスパン要素を含めるという複雑さが増すことはありません（これにより、隣の要素で垂直方向の配置の問題が発生します）。

背景を常に垂直方向にh1の中央に配置できるはずです。その場合、.tree_iconクラスは必要ないかもしれません。

于 2010-06-27T23:12:24.717 に答える
0

スパンをH1の前に置いて、左に浮かせてみましたか？

于 2010-06-28T00:05:01.877 に答える