Bootstrap col-sm-4 Text vertikal ausrichten

Question

Ich habe ein Problem, meinen Text in einem col-sm-4 Div vertikal auszurichten. Wie Sie sehen können, ist der Text nicht vertikal ausgerichtet. Wie man es löst?

hier ist mein HTML-Code

<div class="container"> 
 
    <div class="row"> 
 
    <h1 class="section-title"> HOW NIBOOK WORKS</h1> 
 
    <div class="col-sm-4"><img src="img/Profile.png" class="how-it-works-step-icon"> 
 
     <h1 class="how-it-works-title">Become a "NI"booker</h1> 
 
     <h2 class="how-it-works-subtitle">Create your profile and start sharing your skills and services to locals</h2> 
 
    </div> 
 
    <div class="col-sm-4"><img src="img/bookmark.png" class="how-it-works-step-icon"> 
 
     <h1 class="how-it-works-title">Get booked from locals</h1> 
 
     <h2 class="how-it-works-subtitle">Meet in your convenient place to provide your talent</h2> 
 
    </div> 
 
    <div class="col-sm-4"><img src="img/page.png" class="how-it-works-step-icon"> 
 
     <h1 class="how-it-works-title">Receive your money</h1> 
 
     <h2 class="how-it-works-subtitle">Get your money directly to your account</h2> 
 
    </div> 
 
    </div> 
 
</div>

und mein css

.how-it-works-title { 
 
\t font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
\t font-size: 24px; 
 
\t font-weight: bold; 
 
\t line-height: 18px; 
 
\t margin: 25px 0 15px; 
 
\t text-align: center; 
 
\t padding-top: 10px; 
 
} 
 
.how-it-works-subtitle { 
 
\t font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
\t font-size: 18px; 
 
\t line-height: 18px; 
 
\t margin: 25px 0 15px; 
 
\t text-align: center; 
 
\t padding-top: 10px; 
 
\t font-weight: lighter; 
 
\t padding-bottom: 10px; 
 
} 
 
.how-it-works-step-icon { 
 
\t display: block; 
 
\t margin: auto; 
 
} 
 
.section-title { 
 
\t font-size: 28px; 
 
\t font-color: #4C535D; 
 
\t font-weight: bold; 
 
\t line-height: 18px; 
 
\t margin: 0; 
 
\t padding-top: 50px; 
 
\t padding-bottom: 60px; 
 
\t text-align: center; 
 
\t text-transform: uppercase; 
 
} 
 
.section-subtitle { 
 
\t font-size: 15px; 
 
\t font-weight: normal; 
 
\t letter-spacing: 1.5px; 
 
\t margin: 10px 0 0 0; 
 
\t text-align: center; 
 
}

Ich bin neu auf Bootstrap, CSS usw., also bin ich traurig, wenn dies eine sehr Anfänger Frage ist

Answer 1

hier ist das Endergebnis mit allen Bildern sind vertikal ausgerichtet nur ein Problem mit Ihnen ist Bilder Größe Ich kopierte alles, was Sie Code und Größe von Bildern auf eine gleiche Größe von 88px * 87px und Alles funktioniert gut. i vorgesehen, um eine Linie durch die Bilder dienen, dass alle vertikal

Answer 2

versuchen gibt gleiche Größe, um Ihre Bilder also profile.img , bookmarkg.png , page.png es sieht aus wie Ihre Bilder unterschiedlicher Größe sind, auch als Alternative Sie können verwenden font-awesome Fonts anstelle dieser Bilder