Skip to main content
adicionou 625 caracteres ao conteúdo
Fonte Link
Carlos
  • 1,6mil
  • 1
  • 15
  • 26

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>

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 menu ocupam, definido de forma fixa;

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 cí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>
Fonte Link
Carlos
  • 1,6mil
  • 1
  • 15
  • 26

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 menu ocupam, definido de forma fixa;