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

Antworten:

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