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

Centering buttons in HTML

I can’t center my buttons on my website. My code is below:

.buttonHolder {
    text-align: center;
    display: flex;
}

<div class="buttonHolder">
    <form action="#sweater">
        <input type="submit" value="Sweater" />
    </form>
    <form action="#pants">
        <input type="submit" value="Pants" />
    </form>
    <form action="#shirt">
        <input type="submit" value="Shirt" />
    </form>
    <form action="#suit">
        <input type="submit" value="Suit" />
    </form>
</div>

The website looks like this, not how I intended:

What it looks like

I want them to be centered.

Tags:

3

Answers


  1. 0

    You are just missing one css property. Add justify-content: center to buttonHolder and you are done.

    Below is working example of same.

    .buttonHolder {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
    <div class="buttonHolder">
  <form action="#sweater">
    <input type="submit" value="Sweater" />
  </form>
  <form action="#pants">
    <input type="submit" value="Pants" />
  </form>
  <form action="#shirt">
    <input type="submit" value="Shirt" />
  </form>
  <form action="#suit">
    <input type="submit" value="Suit" />
  </form>
</div>
    Login or Signup to reply.
  2. 0

    2 Flexbox properties to center:

    .buttonHolder {
display: flex;
align-items: center;
justify-content: center;

    1 Grid property:

    .buttonHolder {
display: grid;
place-items: center;
    Login or Signup to reply.
  3. 0

    Aside from the above, you can apply internal css to center button

    <div class="buttonHolder" align="center">
  <form action="#sweater">
    <input type="submit" value="Sweater" />
  </form>
  <form action="#pants">
    <input type="submit" value="Pants" />
  </form>
  <form action="#shirt">
    <input type="submit" value="Shirt" />
  </form>
  <form action="#suit">
    <input type="submit" value="Suit" />
  </form>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search