如果文本居中对齐，如何使背景图像在任何屏幕尺寸中居中？

Question

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

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/

Answer 1

: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