0

Bom tenho aqui os botões personalidades com CSS. Preciso que eles sempre fiquem no centro da pagina, se eu colocar vários botões eles tem que ficar em um fila no centro da página. E quando a tela for pequena eles vão criando uma quebra de linha.

Alguém sabe como fazer isso sem ter que colocar os botões dentro de uma tag?

.text-white,
.text-white-houve:hover,
.bt {
  color: #FFFFFF !important;
}
.shadow-1,
.bt,
.container {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.shadow-2,
.bt:hover,
.context_menu_pai,
.box_login,
.datepicker.dropdown-menu,
.dialogbox,
.overflow-menu ul {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.transition-1,
.bt {
  transition: all .3s ease-out;
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}
.bt {
  border: 0;
  padding: 10px;
  width: 200px;
  height: 50px;
  display: inline-block;
  margin: 10px;
  cursor: pointer;
  border-radius: 4px;
}
<button class='bt' type='submit'>OK</button>
<button class='bt' type='submit'>OK</button>
<button class='bt' type='submit'>OK</button>
<button class='bt' type='submit'>OK</button>

2
  • O botoes estao dentro de algum elemento sem ser o <body>?
    – rdleal
    Commented 21/12/2016 às 21:47
  • @PanterA estão apenas no body Commented 21/12/2016 às 22:06

3 Respostas 3

3

Para alinhar no centro você vai ter que usar um elemento-pai. Coloque os botões dentro de um div.

div {
    width: 1000px;
    margin: 0 auto;
}

O width pode ser qualquer tamanho, mas é obrigatório.

Agora para ter quebra de linha será necessário reduzir o width do elemento-pai com a ajuda de @media-queries, fazendo com que os botões se ajustem na vertical.

@media only screen and (max-width: 330px) {
    div {
        width: 250px;
    }
}

Sobre o exemplo acima. Quando o browser for menor que 331px, o elemento-pai será reduzido, fazendo com que os botões gerem quebras de linha.

6
  • teria um exemplo de como fazer usando um elemento-pai? Commented 21/12/2016 às 22:06
  • Seria colocar os botões dentro de um div. E então alinha-los no centro da tela.
    – relaxeaza
    Commented 21/12/2016 às 22:14
  • tem como editar sua resposta? Commented 21/12/2016 às 22:17
  • Tem sim. Feito.
    – relaxeaza
    Commented 21/12/2016 às 22:24
  • Bom aqui não deu certo, ficou tudo em sima do outro. Isso só pode ocorrer se não houver espaço na tela. Commented 21/12/2016 às 22:50
2

Como seus botões estão com display: block-inline, o comportamento deles será semelhante a um elemento inline, ficando sujeitos a alinhamentos de texto. Então você pode adicionar a seguinte regra no elemento body para centralizar seus botões:

body {
   text-align: center
}

Nesse caso, o text-align vai afetar todos elementos inline dentro do body. Se quiser restringir isso aos botões, colocá-los dentro de uma div deve resolver seu problema:

.bt-container { 
   text-align: center 
 }
.text-white,
.text-white-houve:hover,
.bt {
  color: #FFFFFF !important;
}
.shadow-1,
.bt,
.container {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.shadow-2,
.bt:hover,
.context_menu_pai,
.box_login,
.datepicker.dropdown-menu,
.dialogbox,
.overflow-menu ul {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.transition-1,
.bt {
  transition: all .3s ease-out;
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}
.bt {
  border: 0;
  padding: 10px;
  width: 200px;
  height: 50px;
  display: inline-block;
  margin: 10px;
  cursor: pointer;
  border-radius: 4px;
}
<div class="bt-container">
    <button class='bt' type='submit'>OK</button>
    <button class='bt' type='submit'>OK</button>
    <button class='bt' type='submit'>OK</button>
    <button class='bt' type='submit'>OK</button>
</div>

3
  • bom dessa forma todo o texto da página fica no centro. acho que a única forma de fazer isso e usando um div pai, como o @Rafael Mafra falou. Commented 21/12/2016 às 22:42
  • 1
    Sim. A forma mais facil é com uma div, e aplicar a regra do text-align: center na div. Fazendo dessa forma os botões vão se alocando e as quebras de linhas vão ocorrendo de acordo com o tamanho da tela.
    – rdleal
    Commented 21/12/2016 às 22:44
  • Ok obrigado pela ajuda :) Commented 21/12/2016 às 22:47
0

Antes de tudo sugiro que pesquise sobre "mobile first", isso vai fazer com que escreva muito menos e seu desenvolvimento fica mais "intuitivo".

Note aqui que eu adicionei a propriedade "display" com o valor "inline-block", isso faz com que os botoes herdem propridades de elementos block e nao irao ficar se sobrepondo quando voce adicionar um padding e houver uma quebra de linha.

.container {
  width: 100%;
  max-width: 100px;
  margin: 0 auto;
  text-align: center;
}

.container button {
  border: none;
  cursor: pointer;
  background: #aaaaaa;
  color: #ffffff;
  display: inline-block;
  margin: 0 -2px;
  padding: 5px 10px;
  border: 1px solid #666666;
}

.container button:hover {
  background: #333333;
}
<div class="container">
  <button>one</button>
  <button>two</button>
  <button>three</button>
  <button>four</button>
  <button>five</button>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .