Wie kann ich ein HTML-Span-Tag zentrieren und rechts ausrichten? Hier ist die Stilanalyse von HTML-Span-Tags

In diesem Artikel geht es hauptsächlich darum, wie man den Text des Span-Tags in HTML zentriert und rechtsbündig ausrichtet. Hier finden Sie auch verschiedene Beispiele.

Lassen Sie uns zunächst einen Blick darauf werfen Sehen Sie sich an, wie das HTML-Span-Attribut zentriert ist?

Tatsächlich gibt es viele Möglichkeiten, den Span-Text zu zentrieren. Hier ist eine einfachere Möglichkeit, die folgende Codezeile in den Code einzufügen:

style= " text-align :center; line-height:18px; Ebenso kann der Text vertikal zentriert werden (nur eine Textzeile).

Die horizontale Zentrierung ist sehr einfach, stellen Sie einfach text-align:center ein, aber die vertikale Zentrierung war schon immer ein Rätsel! Früher habe ich immer versucht, die Polsterung oben anzupassen, aber manchmal hat es funktioniert, und meistens hat es nicht funktioniert. Heute ist es dasselbe, wenn der Höhenwert nicht groß ist und die Polsterung zunimmt. top erhöht die gesamte DIV- oder SPAN-Höhe.

Ich dachte, dass der Standardwert von Vertical-Alignment theoretisch Baseline und nicht Top-Alignment sein sollte, und plötzlich fiel mir ein, dass die Schriftart ein Zeilenhöhenattribut hat, sodass ihr Standardwert offensichtlich so hoch ist wie ein Zeichen, also ändern Sie den Zeilenhöhenwert so, dass er mit der Höhe von DIV oder SPAN übereinstimmt!

Auf diese Weise wird der Text in DIV und SPAN vertikal in der Mitte ausgerichtet.

<style>
div {text-align:center;}
div dd,div dt {text-align:left;}
</style>
<div>
<dl>
<dd>111</dd>
<dt>11111111111111</dt>
<dd>222</dd>
<dt>222222222222222</dt>
</dl>
<span><a href="m.sbmmt.com">水平居中</a></span>
</div>

Auf diese Weise wird der Inhalt im Span-Tag in der Mitte der Seite angezeigt Der Effekt ist wie folgt:

Das nächste Problem, das wir lösen müssen, ist die richtige Ausrichtung?

Wenn wir Websites erstellen, fügen wir häufig Span-Rechtsausrichtung zu div, li und span hinzu. Beispielsweise fügen wir in der Artikelliste Zeit für die Rechtsausrichtung hinzu, um die Lesbarkeit zu verbessern Der folgende Code:

html lautet wie folgt:

<ul class="news">
    <li>span右对齐,换行显示的解决方法<span>2010-8-26</span></li>
</ul>

Aber das Problem kommt wieder, oft sind wir in einem Block. Wenn Sie span zur Webseite hinzufügen, werden Sie feststellen, dass das span rechtsbündig ist, wenn Sie die Vorschau auf der Webseite anzeigen. Warum ist das so?

Es stellt sich heraus, dass, wenn Nicht-Float-Elemente und Float-Elemente zusammen sind und die Nicht-Float-Elemente vorne liegen, die Float-Elemente getrennt werden, selbst wenn die Spanne float:right ist Die Textanzeige ist float:none, daher wird span ausgeschlossen.

<ul class="news">
    <li><span>2010-8-26</span>span右对齐,换行显示的解决方法</li>
</ul>

<ul class="news">
<li><span class="fl">span右对齐,换行显示的解决方法<span><span class="fr">2010-8-26</span></li>
</ul>
.fl {float:left;}
.fr{float:right;}