0

以前也问过这个问题，但是解决不了，所以再问。

我正在尝试将垂直精灵中的图标（左侧）与文本（右侧）对齐。无论图标和文本的大小如何，我都希望文本和图标底部对齐，即文本可以是 h1 也可以是 h5。图标大小在 25 像素时基本保持不变。

我目前正在使用以下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

您可以做的是将“icons1 tree_icon”类放在 h1 上。这样一来，您就不会因为在其中添加额外的 span 元素而增加复杂性（这会导致其旁边的元素出现垂直对齐问题）。

您应该能够始终将背景垂直居中在 h1 上。你甚至可能不需要 .tree_icon 类。

于 2010-06-27T23:12:24.717 回答
0

您是否尝试过将跨度放在 H1 之前并使其左浮动？

于 2010-06-28T00:05:01.877 回答