如何将 3 div 与 img 居中并像这张图片 (anexo) 一样将它们标记为其他 div？

Question

我需要创建一个header，包括公司的一些联系人，在那个header我需要插入图像和标签（如附图），如何创建header 忠实于此布局？

请记住，标签应在 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>

如何将 3 div 与 img 居中并像这张图片 (anexo) 一样将它们标记为其他 div？

How to center 3 divs with img and label each into other div like this image (anexo)?

html

css

image

center