So richten Sie CSS-Symbole am Text aus

Im Folgenden stellen wir Ihnen zwei Methoden zum Ausrichten von CSS-Symbolen und Text vor. Der Inhalt ist ziemlich gut, daher möchte ich ihn jetzt mit Ihnen teilen und als Referenz für alle dienen.

Beim Schreiben von Seiten stoßen wir oft auf die Situation, kleine Symbole am Text auszurichten. Zum Beispiel:

                                                                                                         🎜> Zwei Methoden zusammengefasst, die beide weniger Code erfordern.

Der erste Typ

　　Stellen Sie die vertikale Ausrichtung des Bildes auf Mitte ein,

XML/HTML

<p>
        <img src="" alt="" class="heart">
        <span>1169</span>
        <img src="" alt="" class="comment">
        <span>1168</span>
</p>

XML/HTML

p{    
     height:30px;    
     line-hight:30px;    
}    
.heart,.comment{    
        vertical-align:middle;    
}

Der zweite Typ

Das kleine Symbol als Hintergrundbild festlegen, Abstand anpassen

XML/HTML

<p>
        <span class="heart">1169</span>
        <span class="comment">1168</span>
</p>

JavaScript

.hear{    
        background:url(images/heart.png) left center no-repeat;    
        margin-right:20px;    
}    
.comment{    
        background:url(images/comment.png) left center no-repeat;    
}    
.hear,.comment{    
        height:30px;    
        line-height:30px;    
        padding-left:20px;    
}

Das war's Der gesamte Inhalt dieses Artikels soll für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

So verwenden Sie CSS, um den Dropdown-Pfeil der Auswahl zu entfernen

Das obige ist der detaillierte Inhalt vonSo richten Sie CSS-Symbole am Text aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!