Heim > Artikel > Web-Frontend > Beschreibung zweier Implementierungsmethoden zum Ausrichten von CSS-Symbolen und Text
Beim Schreiben von Seiten stoßen wir oft auf die Situation, kleine Symbole am Text auszurichten. Zum Beispiel:
🎜>. S fasst zwei Methoden zusammen, die beide weniger Code erfordern.
Der erste TypStellen Sie die vertikale Ausrichtung des Bildes auf Mitte ein,
<p> <img src="" alt="" class="heart"> <span>1169</span> <img src="" alt="" class="comment"> <span>1168</span> </p>
p{ height:30px; line-hight:30px; } .heart,.comment{ vertical-align:middle; }
Legen Sie das kleine Symbol als Hintergrundbild fest und passen Sie den Abstand an
<p> <span class="heart">1169</span> <span class="comment">1168</span> </p>
.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; }
Die beiden oben genannten Methoden zum Ausrichten von CSS-Symbolen und Text sind hoffentlich alle vom Editor geteilten Inhalte Es kann Ihnen eine Referenz geben, und ich hoffe auch, dass jeder die chinesische PHP-Website unterstützt.
Das obige ist der detaillierte Inhalt vonBeschreibung zweier Implementierungsmethoden zum Ausrichten von CSS-Symbolen und Text. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!