“ul”中的背景图片居中...但我喜欢它在顶部

时间:2008-12-09 08:23:53

标签: image background alignment html-lists

在此页面(http://www.bonniesphere.com/blog/elsewhere/)上,“li”项目包含图片而非子弹。但是图像是垂直居中的,并且在多行条目中它看起来不太好。谁能告诉我CSS中是否有应该更改的内容?

以下是相关代码:

.entry ul {list-style-type:none;} .entry ul li {padding:0 0 0 15px; background:url(img / ol.gif)no-repeat left center; margin-left:10px;}

非常感谢你的帮助......

5 个答案:

答案 0 :(得分:4)

中心替换为顶部

background: transparent url(img/ol.gif) no-repeat scroll left top;

答案 1 :(得分:0)

.entry ul {list-style-type:none;} 
.entry ul li{padding: 0 0 0 15px;
background: url(img/ol.gif) no-repeat left top center;
margin-left:10px;}

只是键入了我的头脑,但“顶部”属性可能会这样做。 你可以试着用顶部标签替换左边或中心,不能检查你,因为我的webdeveloper插件正在玩弄我。 :(

我在当地检查过,它是中心标签。但是还需要额外的空白。

答案 2 :(得分:0)

.entry ul li{padding: 0 0 0 15px;background: url(img/ol.gif) no-repeat left 4pt;margin-left:10px;}

基本上你需要从顶部指定偏移量。你有中心,它显然使图像垂直居中。

粗略猜测,我使用 4pt ,但这取决于您想要定位图像的确切位置。使用 4pt ,它大致将它与第一行对齐,但是字体大小的任何变化都会使定位变得麻烦。

就个人而言,使用顶部作为垂直位置对我的喜好来说有点太高了。

答案 3 :(得分:0)

这很奇怪......我尝试了上面的所有三个建议,但没有一个改变任何东西。更多信息,如果有帮助:它是一个Wordpress博客(在我的服务器上),我正在通过主题编辑器编辑style.css。 (这应该没有任何区别......)

你认为CSS中的某些东西会使图像在中心保持对齐,从而超越了这段代码吗?

答案 4 :(得分:0)

感谢您的建议......我有Firebug但从未使用它 - 所以结合使用Firebug和BBEdit的“比较”功能,我终于能够弄清楚了!模板作者提供了针对项目符号的修复,但是当我上传最新版本的主题时,问题再次出现。我找到了,并且瞧瞧...

感谢这两个程序,我还能找到一个其他无效的修复程序。

我是一个快乐的露营者!至少......直到下次我碰到一些我无法修复的东西......

: - )