Frage HTML-Bereich Align Center funktioniert nicht?


Ich habe etwas HTML:

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

Die Div ändert den Abstand in meinem Dokument, daher möchte ich stattdessen einen Bereich verwenden.

Aber span zentralisiert nicht den Inhalt:

<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>

75
2017-12-05 21:35


Ursprung


Antworten:


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 hat die Breite des darin enthaltenen Texts. Derzeit versuchen Sie, die Ausrichtung 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 align-Attribut ist jedoch veraltet. Sie sollten das CSS verwenden text-align Eigenschaft auf dem Container.

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

143
2017-12-05 21:41



Bitte verwenden Sie den folgenden Stil. margin:auto Normalerweise wird der Inhalt zentriert. display:table wird benötigt für span Element

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

36
2017-08-19 17:21



Das align Attribut ist veraltet. Verwenden Sie CSS text-align stattdessen. Außerdem zentriert der Bereich den Text nicht, es sei denn Sie verwenden display:block oder display:inline-block und setze einen Wert für die Breite, aber dann verhält es sich wie ein div (Blockelement).

Können Sie ein Beispiel Ihres Layouts veröffentlichen? Verwenden Sie www.jsfiddle.net


22
2017-12-05 21:41



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

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

Für mich hat es sehr gut geklappt. versuche das auch


7
2018-02-04 14:34



Span ist Inline-Block und passt sich an die Inline-Textgröße an, mit einer Hartnäckigkeit, die die meisten Bemühungen zum Stillen außerhalb des Inline-Kontexts blockiert. Um den Layout-Stil zu vereinfachen (limit conflicts), fügen Sie div dem Tag 'p' mit einem Zeilenumbruch hinzu.

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

0
2018-05-13 07:44



Über all den anderen Erklärungen glaube ich, dass Sie gleich verwenden "=" Zeichen, anstelle von Doppelpunkt ":":

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

Es sollte sein:

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

-1
2018-04-06 09:30



Benutz einfach word-wrap:break-word; in der CSS. Es klappt.


-3
2017-07-14 15:59