Wie Zentriere ich text in ein span?

Finden Sie diese website

Wie bekomme ich den test in der Mitte der Spanne, die in?

Dies ist die Verwendung von Twitter Bootstrap.

Habe ich versucht viele verschiedene Möglichkeiten, wie css, inline-styling, das festlegen von Rändern, etc, aber ich Schaffe es nicht, den span zu tun, was ich brauche. Es scheint, als ob seine gezogen wird, um die genaue Breite von text.

Mein Hauptziel ist es eigentlich, um in der Lage zu bringen, den text Bundesweite Warnungen nach unten, so dass es auf der gleichen Zeile wie die Tasten.

Die heikle Sache ist, dass ich kann nicht geben diese Spanne eine hart codierte Breite, da die Seite in der Größe verändert

Paul

  • Ich habe nicht geklickt, den link (Fragen sollten im code enthalten, nicht erforderlich, die Menschen zu gehen, zu externen Seiten, außer für die zusätzliche info) ABER überspannt sind, durch Standard -, inline, und das zentrieren der text macht nur Sinn, im inneren Elemente display block oder eine Feste Breite.
  • in diesem Fall würde ich die Verwendung von Tabellen für das layout. Ich weiß, es ist entmutigt und Zeug, aber es wird sehr einfach und sauber.
  • Mögliche Duplikate von HTML-span-align-center nicht funktioniert?
InformationsquelleAutor Paul | 2015-01-11
  1. 6

    Hintergrundfarbe auf die Spanne, um zu sehen, warum es nicht funktioniert. Diese drei Elemente sind in einem div ohne CSS zugeordnet. Damit der span in der Mitte zu sein, müssen Sie den div, der es umgibt, das zumindest die Breite & text-align-Eigenschaften.

    Ändern

            <div>
            <button id="btnPrevious" type="button">Previous</button>                
            <span style="width: 100%;text-align: center">TEST</span>
            <button id="btnNext" type="button" style="float: right">Next</button>
        </div>

    zu

            <div class="centerTest">
            <button id="btnPrevious" type="button">Previous</button>                
            <span style="width: 100%;text-align: center">TEST</span>
            <button id="btnNext" type="button" style="float: right">Next</button>
        </div>

    mit welchen Namen auch immer Sie möchten & verwenden

    .centerTest {
    width:100%;
    text-align:center;
}

    Darüber hinaus mit diesem markup-code, so ist die Sache dem span-center, aber Sie müssen Sie float:left zu Ihrem btnPrevious id. Würde ich verzichten, so viel wie möglich, von der Verwendung von inline-CSS, es sei denn, Sie sind dem Design von HTML-E-Mail, so erstellen Sie einfach eine CSS-Datei, dass Sie die LETZTEN in Ihre Liste der CSS-Dateien und fügen Ihre änderungen gibt.

    Zum Beispiel, wenn btnPrevious ist in deinem template-CSS-Datei, in der CSS-Datei, fügen Sie einfach

    #btnPrevious {
    float:left;
}

    und du bist gut.

    EDIT:

    Sorry verpasste die Bootstrap-Teil wie ich habe gerade eine Suche nach "TEST" in Ihrem code. Bootstrap ist gebaut mit diesen Klassen, und dass diese bereits in einem container, Sie sollten in der Lage sein, um hinzuzufügen text-center auf den blank-div, und es sollte den trick tun

    Ändern

            <div>
            <button id="btnPrevious" type="button">Previous</button>                
            <span style="width: 100%;text-align: center">TEST</span>
            <button id="btnNext" type="button" style="float: right">Next</button>
        </div>

    zu

            <div class="text-center">
            <button id="btnPrevious" type="button">Previous</button>                
            <span style="width: 100%;text-align: center">TEST</span>
            <button id="btnNext" type="button" style="float: right">Next</button>
        </div>
    • Das funktionierte perfekt, danke!
    InformationsquelleAutor badfilms
  2. 1

    Spannweiten, wie Sie vermutete, gezogen, um die genaue Breite von text. Sie können dies umgehen, indem Sie es den Stil display: block; width: 100%; oder jede Breite, die Sie möchten. Dies wird alles versauen, in Ihrem Fall, da Sie andere Elemente vor und nach der Spanne selbst.

    Dafür müssen Sie zusätzlich legen Sie es auf die position absolute.

    InformationsquelleAutor Emil
  3. 1

    Mit bootstrap 2.3.0, es ist ein .text-center-Klasse, die Sie verwenden können, 3

    <span class="text-center">...</span>

    und eine Paginierung-zentriert für bootstrap 3

    <span class="pagination-centered">...</span>
    InformationsquelleAutor Coding Enthusiast
Schreibe einen Kommentar