html - 如何使用 img 将 3 个 div 居中并像这个图像(anexo)一样将每个 div 标记到其他 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>