Способы выравнивания элементов по вертикали

Элементы с известной высотой

• Родительский блок с заданной высотой
• Элемент, который необходимо выровнять: top: 50%; margin-top: - 50% от высоты элемента

Элементы с неизвестной высотой

• Родительский блок: display: table; width:100%;
• Элемент, который необходимо выровнять: display: table-cell; vertical-align: middle;

Иконка слева, текст справа с переносом текста и применение background-position: 0 50%

HTML

<div class="elem">
    <span class="icon"></span>
    <span class="text">adminadminadmin@gmail.ru</span>
</div>

CSS

.elem{
position: relative;
}
.text{
  display: block;
  word-wrap: break-word;
  margin-left: 40px;
}
.icon{
  height: 100%;
  position: absolute;
  display: inline-block;
  font: normal normal normal 14px/1 YourFont;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon:before{
  height: 100%;
  background-position: 0 50%;
  display: inline-block;
  content: '';
  background-repeat: no-repeat;
  width: 24px;
  background-image: url('');
}

Иконка с текстом

HTML

<div class="wrapper">
<div class="block">
    <span class="icon"></span>
    Текст
    <span class="icon"></span>
</div>
</div>

CSS

.wrapper{
  width: 100%;
  display: table;
  height: 200px;
  text-align: center;
}

.block{
  display: table-cell;
  vertical-align: middle;
}

.icon{
  vertical-align: middle;
  display: inline-block;
  font: normal normal normal 14px/1 YourFont;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon:before{
  display: inline-block;
  content: '';
  width: 24px;
  height: 18px;
  background-image: url("");
}