Alignment of buttons with css

Asked

Viewed 38,537 times

0

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>

css

  • The buttons are inside an element other than the <body>?

  • @Panther are just in the body

3 answers

3


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.

  • would have an example of how to do using a parent element?

  • It would put the buttons inside a div. And then align them in the center of the screen.

  • can edit your answer?

  • There is. Done.

  • Well here it did not work, it was all in other’s mind. This can only occur if there is no space on the screen.

  • You need to increase the width the size of the buttons. Each button has 200px, so the div has to have at least 800px to hold all on the same line (not counting the padding and margin which must also be included in the sum).

Show 1 more comment

1

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>

  • good that way the whole page text stays in the center. I think the only way to do this is by using a father div, as @Rafael Mafra said.

  • 1

    Yes. The easiest way is with a div, and apply the rule of text-align: center in the div. Doing so the buttons will be allocated and the line breaks will occur according to the screen size.

  • Okay thanks for the help :)

0

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>

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.