如何用img居中3個div並將每個div標記爲像這樣的圖像（anexo）的其他div？

Question

我需要創建一個頭文件，包括公司的一些聯繫人，並且在該頭文件中我需要插入圖像和標籤（如附圖所示），如何創建一個忠實於此佈局的頭文件？

請記住標籤應該垂直居中div。

我試過到目前爲止：

#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

爲中心，您可以在父用display: inline-block;和text-align: center;內聯元素：

.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>