HTML Span Align Center funktioniert nicht?

107

Ich habe etwas HTML:

<div align="center" style="border:1px solid red">
This is some text in a div element!
</div>

Der Div ändert den Abstand in meinem Dokument, daher möchte ich stattdessen einen Bereich dafür verwenden.

Aber span zentralisiert den Inhalt nicht:

<span style="border:1px solid red;align=center">
This is some text in a div element!
</span>

Wie behebe ich das?

BEARBEITEN:

Mein vollständiger Code:

<html>
<body>

<p>This is a paragraph. This text has no alignment specified.</p>

<span style="border:1px solid red;text-align=center">
  This is some text in a div element!
</span>

</body>
</html>

html css

— David19801
quelle

1

Dein Div "ändert den Abstand"? Was meinst du damit? Und Ihre Spanne wird es nicht, weil es standardmäßig ein Inline- Element ist, während ein div ein Element auf Blockebene ist.

— Bojangles

Hallo JamWaffles, Mit "Abstand" meine ich, dass das div Platz über und unter dem Inhalt hinzufügt. Die Spanne macht das nicht.

— David19801

Verwenden Sie Firebug oder den Chrome-Inspektor, um festzustellen, welche CSS-Regeln auf Ihr Element angewendet werden, und suchen Sie nach der Regel, die Auffüllungen oder Ränder hinzufügt. Es ist auch möglich, dass die umgebenden Elemente Polsterung / Rand haben.

— Bojangles

5

text-align=centersollte seintext-align:center

— n611x007

197

Ein div ist ein Blockelement und erstreckt sich über die Breite des Containers, sofern keine Breite festgelegt ist. Ein Bereich ist ein Inline-Element und enthält die Breite des Texts. Derzeit versuchen Sie, align als CSS-Eigenschaft festzulegen. Ausrichten ist ein Attribut.

<span align="center" style="border:1px solid red;">
    This is some text in a div element!
</span>

Das Attribut align ist jedoch veraltet. Sie sollten die CSS- text-alignEigenschaft für den Container verwenden.

<div style="text-align: center;">
    <span style="border:1px solid red;">
        This is some text in a div element!
    </span>
</div>

— Wille
quelle

46

Bitte verwenden Sie den folgenden Stil. margin:autoWird normalerweise zum Zentrieren des Inhalts verwendet. display:tablewird für spanElement benötigt

<span style="margin:auto; display:table; border:1px solid red;">
    This is some text in a div element!
</span>

— Chris J.
quelle

37

Das alignAttribut ist veraltet. Verwenden Sie text-alignstattdessen CSS . Außerdem zentriert der Bereich den Text nur, wenn Sie display:blockoder verwenden display:inline-blockund einen Wert für die Breite festlegen. Dann verhält er sich jedoch genauso wie ein div (Blockelement).

Können Sie ein Beispiel für Ihr Layout veröffentlichen? Verwenden Sie www.jsfiddle.net

— Luzifer Sam
quelle

Hat super funktioniert! Vielen Dank.

— Dallinchase

Kann ich zwei Inline-Elemente nicht unterschiedlich ausrichten, während ich sie als Inline-Elemente behalte?

— Daniel Springer

10

span.login-text {
    font-size: 22px;
    display:table;
    margin-left: auto;
    margin-right: auto;
}

<span class="login-text">Welcome To .....CMP</span>

Bei mir hat es sehr gut geklappt. versuchen Sie dies auch

— ZIELBAR
quelle

2

Neben all den anderen Erklärungen glaube ich, dass Sie "="anstelle des Doppelpunkts das Gleichheitszeichen verwenden ":":

<span style="border:1px solid red;text-align=center">

Es sollte sein:

<span style="border:1px solid red;text-align:center">

— nhazean
quelle

1

Span ist ein Inline-Block und passt sich der Inline-Textgröße an. Die Hartnäckigkeit blockiert die meisten Bemühungen, aus dem Inline-Kontext heraus zu stylen. Um den Layoutstil zu vereinfachen (Konflikte begrenzen), fügen Sie div zum 'p'-Tag mit Zeilenumbruch hinzu.

<p> some default stuff
<br>
<div style="text-align: center;"> your entered stuff </div>

— markiere Stewart
quelle

-7

Einfach word-wrap:break-word;in der CSS verwenden. Es klappt.

— mon
quelle