Wie zentriere ich 3 divs mit img und label jeweils in andere div wie dieses Bild (anexo)?

Question

Ich muss eine Kopfzeile erstellen, einschließlich einiger Kontakte für eine Firma, und in dieser Kopfzeile muss ich Bilder und Etiketten einfügen (wie im angehängten Bild), wie erstelle ich eine Kopfzeile getreu diesem Layout?

Denken Sie daran, dass die Beschriftungen vertikal auf den Divs zentriert sein sollten.

Ich habe versucht, so weit:

#head { 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    color: white; 
 
    font-weight: bold; 
 
} 
 

 
#head_center { 
 
    /*position: relative;*/ 
 
    width: 100%; 
 
    float: left; 
 
    background-color: red; 
 
    text-align: center; 
 
    display: inline-block; 
 
} 
 

 
#head_left { 
 
    width: 30%; 
 
    float: left; 
 
} 
 

 
#head_right { 
 
    width: 30%; 
 
    float: left; 
 
} 
 

 
#head_center_center { 
 
    width: 30%; 
 
    float: left; 
 
}

<div id="head"> 
 
    <div id="head_center"> 
 
    <div id="head_right"> 
 
     <img src="images/icons/icon_phone.png"> 47 4101 8990 
 
    </div> 
 
    <div id="head_center_center"> 
 
     <img src="images/icons/icon_facebook.png"> copecdigital1 
 
    </div> 
 
    <div id="head_left"> 
 
     <img src="images/icons/icon_email.png"> copec@copecdigital.com.br 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Inline-Elemente zu zentrieren Sie display: inline-block; und text-align: center; auf dem übergeordneten verwenden können:

.container { 
 
    background: red; 
 
    text-align: center; 
 
    padding: 5px; 
 
    color: white; 
 
} 
 

 
.single-set { 
 
    display: inline-block; 
 
    margin: 0 10px; 
 
    vertical-align: center; 
 
    overflow: hidden; 
 
} 
 

 
i, span { 
 
    vertical-align: middle; 
 
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
 
     rel="stylesheet"> 
 
<div class="container"> 
 
    <div class="single-set"> 
 
    <i class="material-icons">face</i> 
 
    <span class="text">Text</span> 
 
    </div> 
 
    <div class="single-set"> 
 
    <i class="material-icons">face</i> 
 
    <span class="text">Text</span> 
 
    </div> 
 
    <div class="single-set"> 
 
    <i class="material-icons">face</i> 
 
    <span class="text">Text</span> 
 
    </div> 
 
</div>