Versuchen, Symbole zu rechtfertigen, die gelassen werden, während Textmitte in HTML gehalten wird

Question

Ich versuche, einen Blick zu erzielen, in dem ich alle Symbole nach links gerechtfertigt habe, während ich den Text zentrierte und den Text bei Bedarf auf eine andere Linie wickle. Ich möchte jedoch, dass das Symbol mit dem Titel verknüpft ist. Im Moment sieht es so aus: enter image description here

Ich bin nicht sicher, warum einige der Boxen vertikal strecken und warum die Symbole auf der Linie über dem Text schweben. Außerdem verschiebt sich ein Teil des Textes außerhalb der grauen Kästchen, in denen er sein soll. Wie bekomme ich jedes Symbol/jeden Titel so, dass er wie das obere Beispiel aussieht (zB Augenglyphon mit "Look Inside This Chapter" -Text)?

Hier ist der HTML-Code Ich verwende:

<div class="text-left"><span class="glyphicon glyphicon-download"> 
</span> <div class="text-center">Teacher Pre-Assessment</div></div> 

ich diesen Code auch versucht zu sehen, ob das funktionieren würde, aber ich habe kein Glück:

<div style="float: left; text-align: left"><span class="glyphicon 
glyphicon-download"></span> <div class="text-center"> Teacher Post- 
Assessment </div></div> 

Answer 1

Darin Szenario können Sie die Symbolposition auf absolut und dann left:0 festlegen. Das kann jedoch dazu führen, dass das Symbol einfach außerhalb des .text-left div. Daher müssen Sie die Position relativ festlegen, da absolute Elemente nach dem nächsten Vorfahren positioniert werden, der eine relative Position hat.

.text-left { 
    position: relative 
} 

.text-left .glyphicon { 
    position: absolute; 
    left: 0; 
} 

Dann können Sie die anderen Elemente frei positionieren, wie Sie möchten.

Answer 2

Sie die Symbole in eine Pseudo-Klasse setzen könnte, so dass sie nicht Ihre HTML verunstalteten:

.text-center { 
    padding-left: 25px; 
    position: relative; 
} 

.text-center:before { 
    position: absolute; 
    content:""; 
    top:0; 
    left:0; 
    width: 20px; 
    height: 20px; 
    background-image: url(http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png) ; 
    background-size:100% 100% ; 
} 

dies im Grunde eine absolute positioniert div in .text-Zentrum schafft, das ist, warum .text-Zentrum braucht etwas Padding, damit der Text nicht unterhalb des Icons läuft.

Beispiel: https://jsfiddle.net/6mjscdxL/

Weitere Details zu Pseudoklassen: https://www.smashingmagazine.com/2011/07/learning-to-use-the-before-and-after-pseudo-elements-in-css/