Ich habe span Elemente, die ich möchte floated und zentriert werden. Ich brauche die Spannweite, so dass sie nicht verschwinden, wenn die Bildschirmbreite kleiner als die Spannweite ist. Wenn sie schweben, springen sie nacheinander zur nächsten Zeile, da der Bildschirm schrumpft. Ich denke, ich kann mit 3 floated divs zentrieren, aber ich frage mich, ob es eine einfache Möglichkeit, dies zu tun und ohne feste Breite auf etwas zu setzen.Center span Elemente mit Float-Attribut

Das Anwenden von display:inline-block auf die Spannen funktioniert nicht. text-align: center wird vererbt.

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>

EDIT: A JSFiddle es zu erklären: https://jsfiddle.net/5yyhdpf1/

Quelle

2016-07-02 Tiago

Ich möchte nur die schwebenden Spannweiten nebeneinander in der Mitte in einer Linie bleiben. Wenn die Bildschirmbreite niedriger als ihre Breite ist, wird der "float" den Bereich auf die nächste Zeile nach Bedarf verschieben. – Tiago

Span Elemente standardmäßig inline sind, das Hinzufügen text-align: center zu Eltern ist alles, was Sie brauchen, warum Sie es erschweren? Was ist der Sinn von Schwimmern?

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

Es gibt so etwas wie Mitte schwebend, nicht stattdessen haben Sie margin: auto verwenden Block-Level-Elemente zu zentrieren.

Quelle

2016-07-02 11:08:01 Aziz

Die schwebenden Spannweiten werden vertikal ausgerichtet (zur nächsten Linie), wenn die Breite kleiner als die Spannweite ist. Siehe EDIT in Frage – Tiago

Ich fand die Lösung, das Verhalten, das ich will, komme nicht von "float", sondern von "inline-block". Es funktionierte nicht genau wegen "float". Vielen Dank. – Tiago

-1

versuchen dies, dies versuchen,

<!--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-Teil/ Spannweite {width: 300px; Textausrichtung: Mitte; float: left;}

Quelle

2016-07-02 11:39:05

Das Inline-Block Attribut, das auf alle Span-Elemente ohne Floats gesetzt wird, verhält sich so. Der "text-align: center" muss auf dem übergeordneten div gesetzt werden.

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

Quelle

2016-07-02 11:43:49 Tiago

Center span Elemente mit Float-Attribut

HTML

Antwort

Verwandte Themen