【问题标题】:css list-style-image is not on (vertical) centercss list-style-image 不在(垂直)中心
【发布时间】:2014-05-29 11:36:16
【问题描述】:

我有这个带有 list-style-image 的简单 ul li 脚本。

问题是图像不在(垂直)中心。

vertical-align 在这里没有用。

有什么想法吗?

http://jsfiddle.net/nDX6g/

ul {
    margin-top: 10px;
    padding-left: 50px;
    color: #3C4355;
    margin-bottom: 6px;
}

li {
    margin-left: 20px;
    color: #3C4355;
    line-height: 20px;
    list-style-image: url('http://forum.bizportal.co.il/NewSite/emoticons/smiley9.gif');
}




<ul>
    <li>Text 1</li>
    <li>Text 2</li>
</ul>

【问题讨论】:

标签: html css html-lists vertical-alignment


【解决方案1】:

示例:http://jsfiddle.net/nDX6g/3/

li {
   list-style: none;
}

li:before {
   content: url(...);
   display: inline-block;
   vertical-align: middle;
   margin-right: .5em;
}

如果您的项目可能跨越两行(或多行),请尝试另一个小提琴:http://jsfiddle.net/nDX6g/4/

截图:

【讨论】:

    【解决方案2】:

    您可以使用背景图片来正确调整背景位置:

    li {
        margin-left: 20px;
        color: #3C4355;
        line-height: 20px;
        background: url('http://forum.bizportal.co.il/NewSite/emoticons/smiley9.gif') 0 0 no-repeat;
        padding-left: 20px;
        list-style-type: none;
    }
    

    演示:http://jsfiddle.net/dfsq/nDX6g/2/

    【讨论】:

      【解决方案3】:

      检查这个demo jsFiddle

      CSS

      ul {
          margin-top: 10px;
          padding-left: 50px;
          color: #3C4355;
          margin-bottom: 6px;
      }
      
      li {
          margin-left: 20px;
          color: #3C4355;
          line-height: 20px;
          padding: 0px 0px 0px 25px;
          list-style: none;
          background: url('http://forum.bizportal.co.il/NewSite/emoticons/smiley9.gif') no-repeat left top;
      }
      

      结果

      【讨论】:

        猜你喜欢
        • 2012-11-07
        • 1970-01-01
        • 1970-01-01
        • 2023-01-14
        • 2022-12-03
        • 1970-01-01
        • 2017-01-30
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多