Centralizing #Menu #Nav on page with circular shapes?

Navigation
2

ThisistheHtmlforthissection:

home#home.scrollbrbr.container.rowa.scrollhref="#oquee"
        .cir O que é
      a.scroll href="#local"
        .cir Local
      a.scroll href="#convidado"
        .cir Convidado
      a.scroll href="#contato"
        .cir Contato
      a.scroll href="#inscricao"
        .cir Inscrição

Good morning, I wonder how I could leave these circles side by side, and centered on the page? I have a landing page for delivery today.

I already tried to apply display: inline; plus it gives the following error

ThisisthecssI'veinserted:

.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%;display:inline;}

HowcanIputeachcirclesidebysideandthencenter?Well,I'vetriedwithBootstrap'sGridsystembutit'snotcentralized.

Itlookslikethiswiththebootstrap:

html bootstrap 

home
  #home.scroll
  br
  br
  .container
    .row
      .col-md-2
        a.scroll href="#oquee"
          .cir O que é
      .col-md-2
        a.scroll href="#local"
          .cir Local
      .col-md-2
        a.scroll href="#convidado"
          .cir Convidado
      .col-md-2
        a.scroll href="#contato"
          .cir Contato
      .col-md-2
        a.scroll href="#inscricao"
          .cir Inscrição

Thank you in advance for your attention.

    
asked by anonymous 06.04.2015 / 19:49

2 answers

1

Try to use float:left in circles to place them side by side. Centralize using a container and setting margin: auto; and align: center; Remembering that the width of the container has to be the space that the circles occupy, fixedly defined;

For example: 

.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>
    
06.04.2015 / 19:56
1

On another question, I've already given a answer to solve a similar problem.

I've adapted the code to center the circles. 

.master {
  border: solid 1px #000;
  font-size: 0;
  text-align: center;
}
.master div {
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  margin: 10px;
  width: 100px;
  line-height: 100px;
  background-color: #229922;
  font-size: 40px;
}
body {
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><buttononclick="$('.master').width($('.master').width()-25)">Clique para reduzir largura em 25px</button>
<button onclick="$('.master').width($('.master').width()+25)">Clique para aumentar largura em 25px</button>
<div class="master">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
    
06.04.2015 / 20:06
Manual update of PHP Version [closed] Error generating code from an entity by extending Pojotype