如果文本居中对齐,如何在任何屏幕尺寸中居中背景图像?

时间:2012-12-18 01:35:44

标签: css background-image alignment

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

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 个答案:

答案 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)

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

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;
}

答案 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;