Esse é o Html dessa seção:
home
#home.scroll
br
br
.container
.row
a.scroll href="#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
Bom dia, Gostaria de saber como eu poderia deixar esses círculos um do lado do outro, e centralizado na página ? Estou com uma landingpage para entregar na data de hoje.
eu já tentei ao aplicar display: inline;
mais ele dá o seguinte erro
esse é o css que eu inseri:
.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;
}
como posso colocar cada circulo um do lado do outro e depois centralizar ? Pois já tentei com o sistema de Grid do Bootstrap mais ele não fica centralizado.
fica assim com o bootstrap:
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
Desde já agradeço pela atenção.