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

I need to create a header, including some contacts for a company, and in that header I need to insert images and labels (as in the attached image), how do I create a header faithful to this layout?

Remember that the labels should be vertically centered on the divs.

I tried so far:

#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"> [email protected]
    </div>
  </div>
</div>

Solution

To center inline elements you can use display: inline-block; and text-align: center; on the parent:

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