如何在html div中居中对齐内联元素？

Question

I have a bunch of spans inside a fixed width div. I would like to let the spans flow inline as they do by design. However, I would like them to be centered on each line instead of being left-aligned. How could I achieve this using css?

<div>
         <span>text1</span>
         <span>text2</span>
         <span>text3</span>
         <span>text4</span>
         <span>text5</span>
         <span>text6</span>
         <span>text7</span>
         <span>text8</span>
         <span>text9</span>
         <span>text10</span>
</div>

Answer 1

Just set text-align: center to the div <div class="dummy"> . Something like this...

.dummy {
    width: 500px;
    text-align: center;
}

jsFiddle DEMO

Hope this is what you are after.

Answer 2

Set a width for the div containing the spans and do this:

span {
        width: 100%;
        text-align: center;
        float: left;
        clear: both;
    }