Wie ein Bild zu erhalten, mit dem Text-Tag

Question

Hallo Jungen, ich diese 3 in Bootstrap zu schaffen versuchen aufreihen: jetzt

Jedoch habe ich diese habe:

ist mein Bild nicht aufgereiht perfekt mit dem h4 Tag und meine p Tags werden nicht in einer Linie als das erste Bild bleiben, ich benutze Bootstrap 3, so dass ich es alles verwendet und fragte mich, ob jemand mir helfen kann, dieses Aussehen zu erreichen, so weit ich habe :

.col-content { 
 
    overflow: hidden; 
 
    padding: 0 15px; 
 
} 
 

 
.col-content p { 
 
    font-size: 13px; 
 
    font-weight: normal; 
 
    text-align: center; 
 
} 
 

 
.col-icon { 
 
    font-size: 48px; 
 
    float: left; 
 
    padding: 20px 10px; 
 
    text-align: left; 
 
}

<div class="row"> 
 
    <div class="col-md-4"> 
 
    <div class="col-icon"> 
 
     <i class="fa fa-lightbulb-o"></i> 
 
    </div> 
 
    <div class="col-content"> 
 
     <h4>Web <span class="highlight">Development</span></h4> 
 
     <p>Praesent sodales, quam vitae gravida interdum, ex mi bibendum enim, sit amet tristique mi quam vel odio. Donec non nunc condimentum, hendrerit elit sed, condimentum magna. Suspendisse imperdiet purus vel ornare cursus.</p> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <div class="col-icon"> 
 
     <i class="fa fa-lightbulb-o"></i> 
 
    </div> 
 
    <div class="col-content"> 
 
     <h4>Internet <span class="highlight">Marketing</span></h4> 
 
     <p>Curabitur et diam elementum, mollis tortor a, malesuada turpis. Vivamus gravida, justo et molestie sollicitudin, erat lorem tempus eros, vel laoreet nibh urna ac nunc, vestibulum neque vitae pellentesque efficitur.</p> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <div class="col-icon"> 
 
     <i class="fa fa-lightbulb-o"></i> 
 
    </div> 
 
    <div class="col-content"> 
 
     <h4>Client <span class="highlight">Support</span></h4> 
 
     <p>Sed porta erat vel ipsum maximus, eget maximus est maximus. Maecenas at venenatis nibh, sit amet suscipit odio. In feugiat vehicula dui. In felis enim, maximus a dolor semper efficitur elit euismod magna quis commodo.</p> 
 
    </div> 
 
    </div> 
 
</div>

Ich versuche nur, um es in dieser Angelegenheit mit Bootstrap-3, so dass jede Hilfe wäre toll, danke wie das erste Bild aussieht

Answer 1

entfernen text-align: center von .col-content p die text- zu vermeiden

https://codepen.io/anon/pen/wpaebo

: in den Absätzen Zentrieren und padding: 20px 10px;- padding: 0 10px 20px 10px; in .col-icon, um die Symbole bis an die Spitze ihres Behälters zu bewegen ändern Verwenden Sie 10

Answer 2

eine Kombination aus top und left während machen das Symbol position:relative

position: relative; 
top: -11px; 
left: 8px; 

.col-content { 
 
    overflow: hidden; 
 
    padding: 0 15px; 
 
} 
 

 
.col-content p { 
 
    font-size: 13px; 
 
    font-weight: normal; 
 
    text-align: center; 
 
} 
 

 
.col-icon { 
 
    font-size: 48px; 
 
    float: left; 
 
    text-align: left; 
 
    position: relative; 
 
    top: -11px; 
 
    left: 8px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
 

 
<div class="row"> 
 
    <div class="col-md-4"> 
 
    <div class="col-icon"> 
 
     <i class="fa fa-lightbulb-o"></i> 
 
    </div> 
 
    <div class="col-content"> 
 
     <h4>Web <span class="highlight">Development</span></h4> 
 
     <p>Praesent sodales, quam vitae gravida interdum, ex mi bibendum enim, sit amet tristique mi quam vel odio. Donec non nunc condimentum, hendrerit elit sed, condimentum magna. Suspendisse imperdiet purus vel ornare cursus.</p> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <div class="col-icon"> 
 
     <i class="fa fa-lightbulb-o"></i> 
 
    </div> 
 
    <div class="col-content"> 
 
     <h4>Internet <span class="highlight">Marketing</span></h4> 
 
     <p>Curabitur et diam elementum, mollis tortor a, malesuada turpis. Vivamus gravida, justo et molestie sollicitudin, erat lorem tempus eros, vel laoreet nibh urna ac nunc, vestibulum neque vitae pellentesque efficitur.</p> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <div class="col-icon"> 
 
     <i class="fa fa-lightbulb-o"></i> 
 
    </div> 
 
    <div class="col-content"> 
 
     <h4>Client <span class="highlight">Support</span></h4> 
 
     <p>Sed porta erat vel ipsum maximus, eget maximus est maximus. Maecenas at venenatis nibh, sit amet suscipit odio. In feugiat vehicula dui. In felis enim, maximus a dolor semper efficitur elit euismod magna quis commodo.</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

für line up display:inline-flex;align-item: flex-start; verwenden und entfernen text-align: center; von p Tag