Как правильно расположить блоки?

Question

[zlFast]

Как сделать, чтобы рядом располагались 3 блока в строку: 2 по краям 150 пикселей, а один по середине занимает всю оставшуюся ширину?
И как вот такое выровнять посередине блока?
https://jsbin.com/cuvaxalani/edit?html,css,output
Если прописываю

.wrap {
  text-align: center;
}

То всё выравнивается, но кружочек налазит на текст, а он должен быть рядом.

Answer 1

[xuxubla]

Первое. Не лучший вариант, наверное, но тем не менее:

<div class="wrap">
  <div class="left">aaa</div>
  <div class="center">aaa</div>
  <div class="right">aaa</div>
</div>

.wrap div {
  display: inline-block;
}
.right, .left {
  width: 150px!important;
  color: red;
}
.right {
  float: right;
}

Что касается второго пункта:

<div class="wrap">
  <a href="#">
    <div><i class="fa fa-circle"></i>First Name <strong>Last Name</strong></div>
  </a>
</div>

.wrap {
  text-align: center;
}
i.fa-circle:before {
    content: "\f111";
    position: relative;
    top: 0px;
}

Answer 2

[K G]

Если ширину контейнера знаешь, то посчитай, если нет сделай просто в процентах. Еще вариант сделай на flexbox, если древние браузеры не требуются.
А во втором на родителя text-align:center и position:relative, а кружок позиционируй абсолютно уже, будет считать от родителя.