Question 279645 in Html Question posted in
Some basic documentation can be found here.

Html – css center 3 inline block buttons

I have 3 buttons <button class="align" id="decrease">decrease</button> <button class="align" id="reset">reset</button> <button class="align" id="increase">increase</button> and a css class .align{ position: absolute; right: 50%; display: inline-block; } that centers some buttons, but the end result looks like this What the buttons look like on page

is there any way i could center them while keeping them seperated, or do i have to assign them each a separate class?

I expected them to be separated because of the display: inline-block; but they just stack on top of each other. i’ve tried giving them margin but that has not worked.

Tags:

3

Answers


  1. 0

    To center the buttons while keeping them separated, you can make a slight adjustment to your CSS. You can apply text-align: center; to the parent container, and then you can set display: inline-block; on the buttons.

    FYI: A quick google search / chatgpt request could’ve solved you this.

    Login or Signup to reply.
  2. 0

    You have a lot of options, the simplest is to put text-align:center; on the container element – in this case <body> – or I also show how you can get even more control – for example here I have active a grid with a small gap between each "column" and 5em width so they all take up the same space. Note 16px = 1em in most modern browsers by default but I set it as a base anyway. So 5em would be 5 X 16 = 80px

    NOTE: on BOTH these you can remove the .align{ display: inline-block; } but that was your question thus I left that in.

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 16px;
}

.align{ display: inline-block; } 
/* note this is the "container" but it could be a div or some other element */

body {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(3, 5em);
  align-items: center;
  justify-content: center;
  gap: 0.25em;
}
    <button class="align" id="decrease">decrease</button> <button class="align" id="reset">reset</button> <button class="align" id="increase">increase</button>

    simplest option:

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.align{ display: inline-block; } 
/* note this is the "container" but it could be a div or some other element */

body {
  text-align: center;
}
    <button class="align" id="decrease">decrease</button> <button class="align" id="reset">reset</button> <button class="align" id="increase">increase</button>
    Login or Signup to reply.
  3. 0

    You can align the three buttons with just a flex parent container:

    .container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;}

.control-button {margin: 0 5px;}

<div class="container">
  <button class="control-button" id="decrease">decrease</button>
  <button class="control-button" id="reset">reset</button>
  <button class="control-button" id="increase">increase</button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search