如果文本居中对齐,如何对齐背景图标图像?就像文字前的小图标一样。如果它不是中心对齐的,我可以使用类似的东西:
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演示:
答案 0 :(得分:4)
: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
答案 1 :(得分:1)
如果您希望文本旁边的图标浮动内嵌,您可能需要考虑将其放在父标记内。然后,无论屏幕大小如何,背景图像都可以浮动在文本旁边:
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;
}
答案 2 :(得分: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;
}
答案 3 :(得分:0)
尝试:
background: url(image.jpg) no-repeat center;
或者:
background-position: center;