HTML

Question

我有 span 元素，我想要浮动和居中。 我需要浮动范围，以便当屏幕宽度小于跨度宽度时它们不会消失。如果浮动，当屏幕缩小时，它们将逐个跳转到下一行。我想我可以使用3浮动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/

Answer 1

默认情况下，跨度元素是内联的，只需将text-align: center添加到父级，您为什么要复杂化？花车有什么意义？

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

没有中心浮动这样的东西，而是必须使用margin: auto来居中块级元素。

Answer 2

inline-block 属性设置为没有任何浮点数的所有span元素将以这种方式运行。必须在父div上设置“ text-align：center ”。

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

Answer 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-部分 / 跨度{宽度：300像素;文本对齐：中心;浮动：左;}

具有float属性的中心span元素

HTML

3 个答案: