Alignment of buttons with css

Question

Well I have here the personalities buttons with CSS. I need them to always stay in the center of the page, if I put several buttons they have to stand in a queue in the center of the page. And when the screen is small they will create a line break.

Does anyone know how to do this without having to put the buttons inside a 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>

Answer 1

To align in the center you will need to use a parent element. Place the buttons inside a div.

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

The width may be any size, but is required.

Now to have line break will be necessary to reduce the width of the parent element with the help of @media-queries, causing the buttons to adjust vertically.

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

About the above example. When the browser is less than 331px, the parent element will be reduced, causing the buttons to generate line breaks.

Answer 2

How your buttons are with display: block-inline, their behaviour will be similar to an element inline, being subject to text alignments. Then you can add the following rule in the element body to center your buttons:

body {
   text-align: center
}

In that case, the text-align will affect all elements inline within the body. If you want to restrict this to the buttons, put them inside a div should solve your problem:

.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>

Answer 3

First of all I suggest you research on "mobile first", this will make you write much less and its development becomes more "intuitive".

Note here that I added the "display" property with the value "inline-block", this causes the buttons to inherit properties of block elements and will not get overwritten when Voce add a padding and there is a line break.

.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>