【问题标题】：Center span elements with float attribute具有浮动属性的中心跨度元素
【发布时间】：2016-07-02 20:02:16
【问题描述】：

我有想要浮动和居中的 span 元素。 我需要浮动跨度，这样当屏幕宽度小于跨度宽度时它们不会消失。如果浮动，它们将随着屏幕缩小而一一跳到下一行。我想我可以使用 3 floated divs 居中，但我想知道是否有一种简单的方法可以做到这一点，并且无需在任何东西上设置固定宽度。

将display:inline-block 应用于跨度将不起作用。 text-align: center 被继承。

HTML

<div style="text-align: center; margin-bottom: 20px;">
    <div style="float:left;">
       <span style="float:left">FOO</span><span style="float:left">BAR</span>
    </div>
</div>

编辑：解释它的 JSFiddle：https://jsfiddle.net/5yyhdpf1/

【问题讨论】：

我只想让浮动的跨度并排保持在中心，在一条线上。因为当屏幕宽度小于它们的宽度时，“浮动”将使跨度根据需要转到下一行。

标签： html css responsive-design css-float

【解决方案1】：

Span 元素默认是内联的，只需要在 parent 中添加 text-align: center 就可以了，为什么要复杂化呢？浮动的意义何在？

<div style="text-align: center; margin-bottom: 20px;">
    <span>FOO</span><span>BAR</span>
</div>

没有中心浮动之类的东西，您必须使用margin: auto 来使块级元素居中。

【讨论】：

当宽度小于跨度宽度时，浮动跨度将垂直对齐（转到下一行）。请参阅有问题的编辑
我找到了解决方案，我想要的行为不是来自“float”而是来自“inline-block”。由于“浮动”，它无法正常工作。谢谢。

【解决方案2】：

inline-block 属性设置为所有没有任何浮动的 span 元素都会以这种方式运行。 "text-align: center" 必须设置在父 div 上。

<div style="text-align: center">
  <span style="display: inline-block">FOO</span><span style="display: inline-block">BAR</span>
</div>

【讨论】：

【解决方案3】：

试试这个，试试这个，

 <!--html-part-->
 <div style="float:left">
    <span style="float:left">FLOATEDSPAN</span>
    <span style="float:left">FLOATEDSPAN</span>
    <span style="float:left">FLOATEDSPAN</span>
    <span style="float:left"></span>
    <span style="float:left">FLOATEDSPAN</span>
    <span style="float:left">FLOATEDSPAN</span>
    <span style="float:left">FLOATEDSPAN</span>
    <span style="float:left">FLOATEDSPAN</span>
    <span style="float:left">FLOATEDSPAN</span>
    <span style="float:left"></span>
    <span style="float:left">FLOATEDSPAN</span>
    <span style="float:left">FLOATEDSPAN</span>
  </div>
  <br>
  <br>
  <br>
  <span>NONFLOATED</span>
  <span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span>

/css 部分/ 跨度{宽度：300px;文本对齐：居中；浮动：左；}

【讨论】：