Heim  >  Artikel  >  Web-Frontend  >  Beschreibung zweier Implementierungsmethoden zum Ausrichten von CSS-Symbolen und Text

Beschreibung zweier Implementierungsmethoden zum Ausrichten von CSS-Symbolen und Text

高洛峰
高洛峰Original
2017-03-09 10:15:042177Durchsuche

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. Beschreibung zweier Implementierungsmethoden zum Ausrichten von CSS-Symbolen und Text

Der erste Typ

  Stellen 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;    
}


Der zweite Typ

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn