tente usar float:left
nos círculos para coloca-los lado a lado. Centralize usando um container e definindo margin: auto;
e align: center;
Lembrando que a largura do container tem que ser o espaço que os itens do menucírculos ocupam, definido de forma fixa;
Por exemplo:
.cir {
background-color:#135d62;
color:#fff;
width:120px;
height:120px;
line-height:120px;
vertical-align:middle;
text-align:center;
font-size: 18px;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
margin-right: 20px;
}
.espacador{ /*como você não quer os circulos colados...*/
margin: 0px;
width: 140px;
height: 120px;
float: left;
}
#container{
width: 420px;
height: 120px;
margin: auto;
align: center;
}
<div id="container">
<div class="espacador">
<div class="cir"></div>
</div>
<div class="espacador">
<div class="cir"></div>
</div>
<div class="espacador">
<div class="cir"></div>
</div>
</div>