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

Question

我在固定宽度的 div 中有一堆跨度。我想让跨度像他们设计的那样内联流动。但是，我希望它们以每一行为中心，而不是左对齐。我怎样才能使用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

只需设置text-align: center为 div <div class="dummy">。像这样的东西...

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

jsFiddle 演示

希望这就是你所追求的。

Answer 2

为包含跨度的 div 设置宽度并执行以下操作：

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