3

如果文本居中对齐，如何对齐背景图标图像？就像文本前的小图标。如果它不是居中对齐的，我可以使用类似的东西：

p { 
  background: url(image.jpg) no-repeat 0 0;
  padding-left: 40px;
}

但是如果我像这样居中对齐它：

p { 
  background: url(image.jpg) no-repeat 0 0;
  padding-left: 40px;
  text-align: center;
}

当文本居中时，背景保持在左角（因此它们之间有很大的差距）。可以使用背景位置，但是，如果屏幕的大小与我使用的不同，背景将与文本重叠。

您可以查看 jsFiddle 演示：

http://jsfiddle.net/PvL3T/2/

4

4 回答 4

5

:first-letter伪元素会很好玩，http://jsfiddle.net/PvL3T/7/

p { 
  padding-left: 40px;
  text-align: center;
}

.resize:first-letter { 
   background: url(http://www.torontorawveganfestival.com/Images/Pen-icon.png) no-repeat 0 50%; padding-left: 20px;
}

如果您愿意，这甚至可以在 IE6 中使用，但前提是选择器和打开曲线括号之间有空格。仅对于 IE6 类似这样的东西p:first-letter{...不起作用，但p:first-letter {...会

并且以类似的方式，您可以使用:first-line

于 2012-12-18T01:53:11.117 回答
1

如果您希望将图标浮动内嵌在文本旁边，您可能需要考虑将其放置在父标记内。然后无论屏幕大小如何，背景图像都可以与文本一起浮动：

http://jsfiddle.net/PvL3T/4/

HTML：

<p><i class="icon"></i>This is a text that is center aligned.</p>

CSS：

p { 
    text-align: center;
}

p .icon {
    background: url(http://www.torontorawveganfestival.com/Images/Pen-icon.png) no-repeat 0 0;
    width: 12px;
    height: 12px;
    display: inline-block;
    margin-right: 10px;
}
于 2012-12-18T01:44:48.773 回答
1

您需要在文本之前添加一个行块显示元素。所以它可以与您的文本内容一起使用。示例：http: //jsfiddle.net/PvL3T/5/

.icon
{
    background: url(http://www.torontorawveganfestival.com/Images/Pen-icon.png) no-repeat center center;
    width: 1em;
    height: 1em;
    display: inline-block;
}​
于 2012-12-18T01:48:25.140 回答
0

尝试：

background: url(image.jpg) no-repeat center;

或者：

background-position: center;
于 2012-12-18T01:40:16.037 回答