Einstellung ein Bild vertikal ausgerichtet mit Text

Question

EDIT: Bitte ignorieren Sie die Telefon/E-Mail-Zeile.

Ich mag diese Art von Ergebnis erreichen:

Da ich die Seite Texte muß als die gleiche Höhe des Symbols sein, ich bin einige Probleme mit dem relativen aufweisen und absolute div wrappers und wie man sie richtig einstellt.

HTML

<div class="row topWrapper"> 
    <div class="iconWrapper"> 
     <i class="fa fa-user-circle-o fa-2x"></i> 
    </div> 
    <div class="captionWrapper"> 
     <h5><strong>Liat </strong></h5> 
     <h5>Your recruitment counsel</h5> 
    </div> 
</div> 

SCSS

.topWrapper { 
    background-color: #d9534f; 
    height: 150px; 
    .iconWrapper { 
    background-color: #f7ecb5; 
    display: inline-block; 
    position: relative; 
    width:16.67%; 
    i{ 
     position: absolute; 
     top: 50%; 
     @include translate(0, -50%); 
    } 
    } 
    .captionWrapper{ 
    background-color: #245580; 
    display: inline-block; 
    } 
} 

Answer 1

Sie brauchen keine absolute Position zu verwenden, zu bekommen, was Sie wollen, nur ein paar Dinge, und Sie sind gut zu gehen.

Siehe Code-Schnipsel:

Hinweis: i SCSS nicht genutzt zu Demonstrationszwecken

.topWrapper { 
 
    background-color: #d9534f; 
 
    height: 150px; 
 
    padding: 5px; 
 
} 
 

 
.iconWrapper { 
 
    display: inline-block; 
 
    font-size: 17px; 
 
} 
 

 
.captionWrapper { 
 
    display: inline-block; 
 
} 
 

 
.captionWrapper h5 { 
 
    margin: 2px; 
 
    /*reduce the margin to make the two texts aligned with the icon*/ 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<div class="row topWrapper"> 
 
    <div class="iconWrapper"> 
 
    <i class="fa fa-user-circle-o fa-2x"></i> 
 
    </div> 
 
    <div class="captionWrapper"> 
 
    <h5><strong>Liat </strong></h5> 
 
    <h5>Your recruitment counsel</h5> 
 
    </div> 
 
</div>