如何获得集中的项目符号列表？用子弹的图像？

Question

现在试图解决这个问题几个小时无济于事....我真的想要一个能够起作用的子弹列表（浏览器宽度）看起来像这样...

基本上整个事物需要居中，你可以将文字居中，而不是子弹图像的跨度： - （

我显然'喜欢'使用UL / LI。但即使不这样做，我也只是想知道怎么做。我还没有在最后解决新手/创业者的问题，假设我可以覆盖图像？无论如何任何建议表示赞赏如果可能的话，我真的需要它来缩小响应式设计......

编辑：

我试过试过漂浮，内衬，偏移，使用网格系统，没什么......： - （

编辑2：

应nathan的要求，我将发布我的一个解决方案......

<div class="section group">       

    <div class="col span_1_of_2">
        <p style="float:right;" class="darkGrey">
            <span class="sprite step2"></span>
        </p>
    </div>

    <div class="col span_1_of_2">
        <h3 class="darkGrey">We then seek to place the you in our network of organizations who actively recruit developers.</h3>
    </div>

</div>

^以上只是把我的嘀嗒一直推到右边......

编辑3

我刚尝试使用图像http://jsfiddle.net/fSSeK/并且它有效但我的子弹点是一个精灵背景图像，它不起作用！

Answer 1

确切的技术取决于你想要展示的子弹类型，但对于经典的子弹来说，这是一种简单的方法。

您需要使用list-style-type: none从浏览器的内置样式中删除子弹，然后将文本水平居中放置在列表元素中，并使用:before伪元素在其内容之前插入项目符号。这个子弹将集中在一起。

示例CSS：

ul {
    list-style-type: none;
}

li {
    text-align: center;
}

li:before {
    content: "• "
}

<强> See it in action

Answer 2

使用带背景图像的伪元素

对于典型列表：

<ul>
    <li>The first line</li>
    <li>The Second line which is longer</li>
</ul>

并使用以下 CSS ：

ul {
    text-align: center;
}
ul li {
    border: 1px dotted blue;
    display: block;
    position: relative;
}
ul li:before {
    content: "";
    background: url(http://placehold.it/20x20) left top no-repeat;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
}

请参阅小提琴演示：http://jsfiddle.net/audetwebdesign/S2Mvn/

如果需要更精确的对齐，可以在li:before元素上使用绝对或相对定位。